2

i have some problem when i use jquery.when function in web form using master page

This is my code in web form using master page

$(document).ready(function(){
  $.when(masterPageFunction()).done(function(){
     webFormFunction();
  });
})

And this my master page

function masterPageFunction() {
   //In this function i call 2 ajax like this
    $.ajax({
         type: "POST",
         url: "/api/master/xxx/",
         data: JSON.stringify(obj),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (response) {
               $.ajax({
                        type: "POST",
                        url: "/api/master/xxx2/",
                        data: JSON.stringify(obj),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {

                        }
              })
         }
   })
}

result is web function is running when master page function not done please help, thank you so much

user3001046
  • 235
  • 1
  • 10
  • 28
  • Why are you using the same parameter for two separate Ajax calls, but do absolutely nothing with the response from either? And why not separate them? Since it will already perform asynchronously? – Greg May 30 '18 at 17:13
  • it's just example. – user3001046 May 31 '18 at 10:20
  • We need more information, the example does not provide enough detail. – Greg May 31 '18 at 15:03
  • Also I believe you want to return a promise, but the way your code is structure won't work the way intended. You may be mixing up asynchronous function with the promise. – Greg May 31 '18 at 15:24

1 Answers1

1

You're close, but the when, then and done functions rely on promises. You aren't returning any promises in your code, so it's just running straight through.

First, you'll need to obtain the result of the promise after it completes in the done function in your master page. We'll do that by adding a response parameter to the callback, then passing it through to webFormFunction.

$(document).ready(function(){
  $.when(masterPageFunction()).done(function(response){
     webFormFunction(response);
  });
})

Next, we need to add a promise to masterPageFunction and return it. You resolve the promise with the response you want to send back to the done function in your master page. Like so:

function masterPageFunction() {

    // Create the promise
    var deferred = $.Deferred();

    //In this function i call 2 ajax like this
    $.ajax({
        type: "POST",
        url: "/api/master/xxx/",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $.ajax({
                type: "POST",
                url: "/api/master/xxx2/",
                data: JSON.stringify(obj),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    // Resolve the promise with the response from $.ajax
                    deferred.resolve(response);
                }
            });
        }
    });

    // Return the promise (It hasn't been resolved yet!)
    return deferred.promise();
}

In this way, webFormFunction won't be called until the second ajax call completes, which resolves the promise.

Andy S
  • 8,641
  • 6
  • 36
  • 40