Retain HTML combobox dropdown selection upon page reload

Retain HTML combobox dropdown selection upon page reload 15.09.2019. u 20:37 · pre 86 meseci #1

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.

Re: Retain HTML combobox dropdown selection upon page reload 16.09.2019. u 00:20 · pre 86 meseci #2

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Potpis

Blessed are those who can laugh at themselves, for they shall never cease to be amused.

Re: Retain HTML combobox dropdown selection upon page reload 16.09.2019. u 13:05 · pre 86 meseci #3

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]]());
    }
});

Re: Retain HTML combobox dropdown selection upon page reload 16.09.2019. u 13:33 · pre 86 meseci #4

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>

Re: Retain HTML combobox dropdown selection upon page reload 16.09.2019. u 13:35 · pre 86 meseci #5

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>

Re: Retain HTML combobox dropdown selection upon page reload 16.09.2019. u 15:21 · pre 86 meseci #6

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.

Re: Retain HTML combobox dropdown selection upon page reload 16.09.2019. u 15:42 · pre 86 meseci #7

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})

Forum kao aplikacija na telefonu

Srodne teme