[ clydefrog @ 15.09.2019. 19:37 ] @
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]
[ mjanjic @ 15.09.2019. 23:20 ] @
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
[ clydefrog @ 16.09.2019. 12:05 ] @
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]
[ Deunan @ 16.09.2019. 12:33 ] @
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>

[ clydefrog @ 16.09.2019. 12:35 ] @
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>

[ Deunan @ 16.09.2019. 14:21 ] @
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.
[ clydefrog @ 16.09.2019. 14:42 ] @
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})