Есть следующий HTML+Django шаблон
<form method='post' action=''>
{% csrf_token %}
<div class="radio_select">
<button class="toggleSel circlesSel" type='button'>
<span class="flaticon-meeting"></span>
<span>Добавить</span>
</button>
<div class="radio_list">
{% for rt in relation_types %}
<div class="com" {% for rs in relationships %}
{% if rt.title.lower == rs.type_of_relation %}style="color: grey; cursor: default" readonly='readonly' onclick='window.event.returnValue=false'{% endif %}
{% endfor %}>
<div class="checkboxwrap">
<input type="checkbox" class="checkbox" id="{{ rt.id }}">
<label for="{{ rt.id }}" {% for rs in relationships %}
{% if rt.title.lower == rs.type_of_relation %}style="cursor: default"{% endif %}
{% endfor %}>{{ rt.title }}</label>
</div>
</div>
{% endfor %}
</div>
</div>
</form>
На странице он отрисовывается в следующее
Суть в том, что это своеобразный выпадающий список с чекбоксами. По нажатию на кнопку button
- он раскрывается и появляются поля мультиселекта.
После выбора опять же таки по нажатию на эту кнопку список обратно сворачивается и происходит ajax
запрос.
Вот сам скрипт.
<script>
$('.checkbox').change(function(){
let objCheck = $('.checkbox');
let listCheck = [];
$.each(objCheck, (i,e) =>{
if ($(e).prop('checked')) {
listCheck.push($(e).attr('id'));
}
})
console.log(listCheck);
run_ajax = $('.toggleSel').attr('data-click-state');
if (run_ajax == '1') {
$(".toggleSel").on('click', function() {
data = {
'choices': listCheck
}
console.log(data);
$.ajax({
type: "POST",
url: "",
data: data,
error: function(result) {
alert('Произошла ошибка. Попробуйте позже.');
}
});
});
}
})
</script>
Возможно, он не очень красиво составлен, но я в js начинающий...
Проблема заключается в том, что происходит два запроса POST
и два запроса GET
, причём один из запросов POST
неполный.
Я пробовал переписать вызов ajax'a
вот так
$(".toggleSel").off().on('click', function() {
Отправляется один запрос, но список не сворачивается.
В общем, помогите сделать так, чтобы отправлялся 1 запрос POST
и список сворачивался. Это всё должно происходить без перезагрузки страницы (сейчас так и происходит).
За сворачивание/развораивание списка отвечает атрибут data-click-state
в button
. Он есть только в развёрнутом состоянии и значение его равно 1
. Также в развёрнутом состоянии появляется класс active
upd. script
<script>
var listCheck = [];
$('.checkbox').change(function(){
let objCheck = $('.checkbox');
listCheck = [];
$.each(objCheck, (i,e) =>{
if ($(e).prop('checked')) {
listCheck.push($(e).attr('id'));
}
})
})
$(".toggleSel").on('click', function() {
run_ajax = $('.toggleSel').attr('data-click-state');
if (run_ajax == '1') {
data = {
'choices': listCheck
}
$.ajax({
type: "POST",
url: "",
data: data,
error: function(result) {
alert('Произошла ошибка. Попробуйте позже.');
}
});
var checkboxes = document.getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
});
</script>