1

Есть следующий 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>

1 ответ 1

1

Дальше запросов будет не два, а больше, потому что на каждое изменение $('.checkbox') Вы навешиваете новый обработчик $(".toggleSel").on('click'. Вынесите второе из первого.


var listCheck = [];

$('.checkbox').change(function(){
  let objCheck = $('.checkbox');
  listCheck = [];
  ...
});

и

$(".toggleSel").on('click', function() {
  ...
});

должны быть на одном уровне, а не один внутри другого.

7
  • не совсем понял, что вы подразумеваете под "Вынесите второе из первого"...( 26 мар 2019 в 15:42
  • Да, я понял, в чём проблема. Но пока что не понимаю, как решить её. Написать два разных скрипта? 26 мар 2019 в 15:43
  • Видимо, я делаю что-то не так. Обновил код в посте. Возможно, это потому что .attr('data-click-state'); есть только у раскрытого списка? Также вряд ли будет виден список listCheck во второй части скрипта 26 мар 2019 в 15:58
  • @m0nte-cr1st0 Добавил в ответ.
    – user176262
    26 мар 2019 в 16:05
  • отлично. Спасибо. У меня ещё один вопрос. Возможно, это уже не по теме, но всё же. Не знаете, как сбросить все выбранные селекты после отправки запроса (без перезагрузки страницы, при сворачивании списка)? 26 мар 2019 в 16:09

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.