Как продолжать делать ajax-вызовы для нескольких форм в пошаговом мастере

Question

Я использую плагин для создания мастера (шаги). В настоящее время мне нужно отправлять вызов ajax на каждом шаге (при выходе из шага). У меня была проблема, что он продолжал посылать бесконечные ajax-вызовы, поэтому я встроил проверку, если ajax-вызов уже был сделан, но теперь он не будет отправлять ajax-вызовы после первого шага.

Как можноЯ изменил это?

Это мой код:

var ajaxInvoke = false;
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
  if(ajaxInvoke == false){
    ajaxInvoke = true;

    var form_data = $("#step_"+ stepNumber +"_form").serialize();

    $.ajax({
      type:'post',
      url:"catalog/calcdiv.php",
      data:form_data,
      success:function(data){
         // indicate the ajax has been done, release the next step
         $("#smartwizard").smartWizard("next");
      }
    });
    // Return false to cancel the `leaveStep` event
    return false;
  }
});

Это мой html:

<div id="step-0" class="">
  <form id="step_0_form" method="post">
    <input type="number" class="formateninput form-control" name="aantal" value="1" min="1">
  </form>
</div>
<div id="step-1" class="">
  <form id="step_2_form" method="post">
    <input type="number" class="formateninput form-control" name="hoogte" value="100" min="60">
  </form>
</div>
<div id="step-2" class="">
  <form id="step_3_form" method="post">
      <input type="radio" id="Hout" name="Materiaal" value="Hout" >
      <input type="radio" id="Debond" name="Materiaal" value="Debond">
  </form>
</div>

Я вижу, что на моей вкладке сети он публикует первый шаг, но при нажатии «Далее» больше нет вызовов ajax после первого.

Answer 1

Вы должны сбросить установленный вами флаг bool, может быть, так:

$.ajax({
  type:'post',
  url:"catalog/calcdiv.php",
  data:form_data,
  success:function(data){
     // indicate the ajax has been done, release the next step
     $("#smartwizard").smartWizard("next");
  },
  complete: function(){ ajaxInvoke = false; }
});

Таким образом, когда ajax завершен, неудачен или успешен, переменная будет сброшена, и следующий ajax будетможно отправить

Answer 2

Помимо сброса переменной, упомянутой другими пользователями, проверьте, когда и сколько раз запускается событие, а также попробуйте выдвинуть один объект с вашими функциями событий:

var ajaxInvoke = false;

var evtOptions = {
   'anchorObject' : anchorObject,
   'stepNumber' : stepNumber,
   'stepDirection' : stepDirection
}

$("#smartwizard").off("leaveStep");
$("#smartwizard").on("leaveStep", function(e, evtOptions) {
  if(ajaxInvoke == false){
    ajaxInvoke = true;

    var form_data = $("#step_"+ evtOptions.stepNumber +"_form").serialize();

    $.ajax({
      type:'post',
      url:"catalog/calcdiv.php",
      data:form_data,
      success:function(data){
         // indicate the ajax has been done, release the next step
         ajaxInvoke = false;
         $("#smartwizard").smartWizard("next");
      }
    });
    // Return false to cancel the `leaveStep` event
    return false;
  }
});

такжекак обычная рабочая практика, я рекомендую использовать $(document) в качестве шины событий, поскольку при использовании элементов страницы иногда возникают странные крайние случаи

Кроме того, при настройке прослушивателя событий всегда удаляйте его с помощью и $().off(), чтобы избежатьосложнения

Answer 3

Переменная остается такой же, как и назначенное вами значение (ajaxInvoke = true), если вы хотите использовать переменную в своем коде;

    var ajaxInvoke = false;
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
  if(ajaxInvoke == false){
    ajaxInvoke = true;

    var form_data = $("#step_"+ stepNumber +"_form").serialize();

    $.ajax({
      type:'post',
      url:"catalog/calcdiv.php",
      data:form_data,
      success:function(data){
         // indicate the ajax has been done, release the next step
         ajaxInvoke = false;
         $("#smartwizard").smartWizard("next");
      }
    });
    // Return false to cancel the `leaveStep` event
    return false;
  }
});