[es] - Retain HTML combobox dropdown selection upon page reload

clydefrog

Član broj: 340220
Poruke: 107

+5 Profil

Retain HTML combobox dropdown selection upon page reload

^{15.09.2019. u 19:37 - pre 55 meseci}

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: 2700

+699 Profil

Re: Retain HTML combobox dropdown selection upon page reload

^{15.09.2019. u 23:20 - pre 55 meseci}

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: 107

+5 Profil

Re: Retain HTML combobox dropdown selection upon page reload

^{16.09.2019. u 12:05 - pre 55 meseci}

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: 84
*.dynamic.isp.telekom.rs.

+21 Profil

Re: Retain HTML combobox dropdown selection upon page reload

^{16.09.2019. u 12:33 - pre 55 meseci}

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: 107

+5 Profil

Re: Retain HTML combobox dropdown selection upon page reload

^{16.09.2019. u 12:35 - pre 55 meseci}

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: 84
*.dynamic.isp.telekom.rs.

+21 Profil

Re: Retain HTML combobox dropdown selection upon page reload

^{16.09.2019. u 14:21 - pre 55 meseci}

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: 107

+5 Profil

Re: Retain HTML combobox dropdown selection upon page reload

^{16.09.2019. u 14:42 - pre 55 meseci}

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