jqueryjquery-steps

How do I return the result of an AJAX call from jQuery.steps?


I know a very similar question was asked and answered here, but the answer there doesn't work for me. I don't know if I'm doing something wrong, or if there has been a change in either jQuery or jQuery.steps in the last 18 months.

In the onStepChanging method, I have the following code (code to check which step we're on etc omitted for clarity)...

    $.ajax({
      url: '/Home/ValidatePostcode',
      type: "GET",
      data: {
        postcode: postcode
      },
      success: function (result) {
        if (result) {
          return true;
        } else {
          return false;
        }
      }
    });

However, this doesn't work. The onStepChanging method returns before the AJAX call does, so the return statement inside the success callback is ignored. According to the answer in the linked post, this is supposed to work.

Not that I want to do this synchronously, but I tried adding async: false to the AJAX call, but it didn't make any difference.

Anyone any idea how I can get this to work? I'm using jQuery.steps v1.0.1 (downloaded this afternoon, so he latest version) and jQuery v1.12.3.


Solution

  • I think you are close.

    The key is the "async: false" you tried, however your "return true;" and "return false;" from within the ajax success method is only returning to the ajax call. The true/false values are not associated to the original onStepChanging method up the call stack.

    All together might look something like this:

    onStepChanging: function (...)
    {
        var response = false;
    
        $.ajax({
            url: '/Home/ValidatePostcode',
            type: "GET",
            async: false,
            data: {
                postcode: postcode
            },
            success: function (result) {
                if (result) {
                    response = true;
                }
            }
        });
    
        return response;
    }
    

    That should work.