Why does my code keep sending ajax calls using the smartwizard plugin?

Question

I have a plugin that creates a form on my website which has steps to it.

This is my code in which I am making the call:

$(document).ready(function(){
    $('#smartwizard').smartWizard({
      lang: {
            next: 'Volgende',
            previous: 'Vorige'
        },
        useURLhash: false,
        showStepURLhash: false
    });

    $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
      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
      // and so the navigation to next step which is handled inside success callback.
      return false;
    });
});

It should just make the call and go to the next step, instead it stays on the same step and keeps making ajax calls like shown in this pic:

Answer 1

The line $("#smartwizard").smartWizard("next"); will again invoke the "leaveStep" event and that is why you are stuck on the event call. You can use a flag to avoid executing the ajax for the "leaveStep" called from the ajax success. Here is the similar issue https://github.com/techlab/SmartWizard/issues/20

Try this code.

var ajaxInvoke = false;

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
      if (ajaxInvoke == false) {
         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 = true;
               $("#smartwizard").smartWizard("next");
            }
          });
      } else {
          ajaxInvoke = false;
      }

      // Return false to cancel the `leaveStep` event
      // and so the navigation to next step which is handled inside success callback.
      return false;
});