Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Retain HTML combobox dropdown selection upon page reload

[es] :: Web aplikacije :: Retain HTML combobox dropdown selection upon page reload

[ Pregleda: 267 | Odgovora: 6 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

clydefrog

Član broj: 340220
Poruke: 82



+1 Profil

icon Retain HTML combobox dropdown selection upon page reload15.09.2019. u 19:37 - pre 4 meseca
Pravim za vežbu web shop, koristim HTML/CSS/JavaScript/Django, i zanima me kako zadržati selektovanu opciju HTML combobox-a (<select>) nakon ponovnog učitavanja stranice. Konkretno, taj HTML combobox služi za filtriranje proizvoda po ceni, datumu, itd. Tako da kada selektujem jednu od opcija, JavaScript poziva Django view koji izlista filtrirane proizvode ali problem je u tome što se combobox value uvek vraća na inicijalno stanje.

Kako to rešiti? Cookies?

@EDIT:

Za sada imam jedno rešenje uz pomoć sessionStorage:

Code:
document.addEventListener('DOMContentLoaded', () => { 
    var combobox = document.getElementById('sort-combobox');
    combobox.addEventListener('change', comboboxContentChanged);

    function comboboxContentChanged() {
        var suffix = combobox.value.split(' ').join('-').toLowerCase();    
        var viewUrl = `products:sort-results-${suffix}`;
        sessionStorage.setItem('sortFilter', combobox.value);
        window.location.replace(Urls[viewUrl]());
    }
});


...ali ovo "predugo drži" (npr odem na home i vratim se na /shop i ono i dalje zadržava vrednost), da li treba da ga clear()-ujem u određenim trenucima možda?

Nisam siguran kako se ovo pravilno radi.

[Ovu poruku je menjao clydefrog dana 15.09.2019. u 21:22 GMT+1]
 
Odgovor na temu

mjanjic
Šikagou

Član broj: 187539
Poruke: 1560



+453 Profil

icon Re: Retain HTML combobox dropdown selection upon page reload15.09.2019. u 23:20 - pre 4 meseca
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
Blessed are those who can laugh at themselves, for they shall never cease to be amused.
 
Odgovor na temu

clydefrog

Član broj: 340220
Poruke: 82



+1 Profil

icon Re: Retain HTML combobox dropdown selection upon page reload16.09.2019. u 12:05 - pre 4 meseca
Napravio sam rešenje sa sessionStorage, i kada se load-uju ostali template-i (recimo 'home.html') vraćam sessionStorage item ('sortFilter') na inicijalnu vrednost, ali opet imam mali problem, naime kada recimo selektujem 'Price ASC' i kliknem na stranu broj dva, vidi se kako se combobox value opet vraća na inicijalnu vrednost i tek onda podešava na vrednost sessionStorage('sortFilter'). Nadam se da me razumete.

Code:
document.addEventListener('DOMContentLoaded', () => { 
    var combobox = document.getElementById('sort-combobox');
    combobox.addEventListener('change', comboboxContentChanged);

    function comboboxContentChanged() {
        mapping = {
            'Newest': 'products:products-list',
            'Price ASC': 'products:sort-results-price-asc',
            'Price DESC': 'products:sort-results-price-desc'
        }

        sessionStorage.setItem('sortFilter', combobox.value);
        window.location.replace(Urls[mapping[combobox.value]]());
    }
});



[Ovu poruku je menjao clydefrog dana 16.09.2019. u 13:16 GMT+1]
 
Odgovor na temu

Deunan

Član broj: 338178
Poruke: 52
*.dynamic.isp.telekom.rs.



+12 Profil

icon Re: Retain HTML combobox dropdown selection upon page reload16.09.2019. u 12:33 - pre 4 meseca
Select zadrzavas sa "selected" tagom. Uporedis filter i dodas tag:
Code:

<select>
    <option value="1" {% if filter == 1 %} selected {% endif %}> prvi </option>
    <option value="2" {% if filter == 2 %} selected {% endif %}> drugi </option>
    <option value="3" {% if filter == 3 %} selected {% endif %}> treci </option>
    <option value="4" {% if filter == 4 %} selected {% endif %}> cetvrti </option>
</select>

 
Odgovor na temu

clydefrog

Član broj: 340220
Poruke: 82



+1 Profil

icon Re: Retain HTML combobox dropdown selection upon page reload16.09.2019. u 12:35 - pre 4 meseca
hm, problem je kako access-ovati filter, tj. 'sortFilter'?

Ja trenutno radim ovako:

Code:
<script type="text/javascript" defer>
    document.addEventListener('DOMContentLoaded', () => { 
        var combobox = document.getElementById('sort-combobox');
        combobox.value = sessionStorage.getItem('sortFilter');
    });
</script>

 
Odgovor na temu

Deunan

Član broj: 338178
Poruke: 52
*.dynamic.isp.telekom.rs.



+12 Profil

icon Re: Retain HTML combobox dropdown selection upon page reload16.09.2019. u 14:21 - pre 4 meseca
Kako filtriras proizvode ako nemas pristup filteru? Prosledi filtere u view.
Cini mi se da je ovo, trenutno, XY problem. Moraces malo bolje da pojasnis kako ti funcionise taj kod.
 
Odgovor na temu

clydefrog

Član broj: 340220
Poruke: 82



+1 Profil

icon Re: Retain HTML combobox dropdown selection upon page reload16.09.2019. u 14:42 - pre 4 meseca
Kliknulo mi je kada si rekao 'prosledi filtere u view', hvala! :)

Sada mi view izgleda ovako na primer:

Code:
def sort_results_price_desc(request):
    products_list = Product.objects.order_by('-price')
    paginator = Paginator(products_list, 3)
    page = request.GET.get('page')
    products = paginator.get_page(page)
    return render(request, 'products/product_list.html', {'products': products, 'filter': 3})
 
Odgovor na temu

[es] :: Web aplikacije :: Retain HTML combobox dropdown selection upon page reload

[ Pregleda: 267 | Odgovora: 6 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.