CODEWITHSUNDEEP
jqueryjquery-steps
DreamingOfSleep
DreamingOfSleep

Reputation: 1448

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.

Upvotes: 1

Views: 2224

Answers (2)

Marco
Marco

Reputation: 75

avoid using async:false. its is not advised as it causes strange behavior and my freeze the UI. jQuery steps onstepchanging accepts bool that's why it wont work with asynchronously.

you can use deferred object to do this but first you need to modify the steps.js with the code found in this link: https://github.com/rstaib/jquery-steps/pull/232

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

onStepChanging: function (...)
{
    var def = $.Deferred();
    falidateCode(postcode).done(function (status) {
    def.resolve(status);
     });
    return def;
}

hope this helps.

Upvotes: 1

Bret Lipscomb
Bret Lipscomb

Reputation: 499

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.

  • Create a variable before the ajax call, say "var response = false;"
  • Then add the async: false to the ajax call
  • Then from within your success method set the response = true;
  • Then back in the onStepChanging method return the response variable. "return response;"

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.

Upvotes: 5

Related Questions