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:

You probably want to have a check on the `stepNumber` and `stepDirection` or add some flag to indicate you've already sent your request. It looks like you're returning false to prevent moving onto the next step and then trying to move to the next step later, calling the `leaveStep` event again. — GammaGames, Oct 15 '19 at 14:13

score 1 · Answer 1 · answered Apr 06 '20 at 14:37

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;
});

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

1 Answers1