Django: Html select с действием onchange (без использования формы) и чистый Javascript: редирект с кодом 200, но страница не загружается
У меня есть select box в шаблоне, который реагирует на изменения с помощью функции onchange, которая отправляет выбранное значение в представление Django. Представление получает необходимые данные из базы данных и должно их отобразить.
main.html
{% block content %}
<select class="form-select form-select-lg mb-3 categorySelect select" name="categorySelect" aria-label="Select category" onchange="getSelectedId(value)">
<option value="None">Select category</option>
<option value="all">All</option>
<option value="cat1">Category 1</option>
<option value="cat2">Category 2</option>
</select>
{% endblock %}
select.js
function getSelectedId(selectedValue) {
const value = selectedValue;
const endpoint = "/all/select";
fetch(endpoint + "?select_id=" + value)
.then()
.then(response => {
})
}
views.py
def select(request):
select_id = request.GET.get("select_id", "None")
print(select_id)
if select_id.__contains__('None'):
return render(request, "home/main.html" )
elif select_id.__contains__('all'):
return redirect(reverse('all:probe_list'))
elif select_id.__contains__('cat1'):
selected = "Category 1"
config = RequestConfig(request)
resultTable = AllProbesTable(Probe.objects.filter(category = "cat1"))
config.configure(resultTable)
return render(request, 'all/selectResults.html', {'table':resultTable, 'selected': selected})
Я получаю правильный select_id в представлении и получаю 200 от редиректа, но страница не меняется (похоже на Этот вопрос). Я понимаю, что мне нужно добавить перезагрузку, например "location.reload()". Я добавил это в шаблон, на который перенаправляю, но это не помогло.
Есть ли способ вызвать перезагрузку или другой способ реализовать select box с onchange, используя только javascript?
Если цель - перенаправить пользователя, то просто перенаправьте его, AJAX не нужен:
function getSelectedId(selectedValue) {
const value = selectedValue;
const endpoint = "/all/select";
window.location.replace(endpoint + "?select_id=" + value);
}
Или:
function getSelectedId(selectedValue) {
const value = selectedValue;
const endpoint = "/all/select";
window.location.href = endpoint + "?select_id=" + value;
}
Первое рассматривается как HTTP-перенаправление, тогда как второе функционально больше похоже на переход пользователя по ссылке.