blocking javascript execution until response is completed

Question

i have js code which returns rows of data for my table. On clicking each of those rows they expand and plan is to show child data of that row by calling another ajax request.

My code for child data looks like below:

function format ( d ) {
    var results;
    $.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/feedbacks/' + 
    d.FeedbackId + '/child/MudFeedbackDetailsVO?onlyData=true',
            
             type: 'get',  
             dataType: 'json',    
             success: function(output) {
    console.log(output.items[0].CriticalPath) ; 
                        results =      output.items[0];        
                }
       
           });
    return  results.CriticalPath;
}

The problem probably is that method doesn't finish by the time value of results.CriticalPath is returned. I can see value in chrome js console so there is no problem with the data part.

So how should i make it return the value once the response is ready

Answer 1

When writing asynchronous code, you need to start working with callbacks rather than return values.

Your functions, like format here, only initiates an action. Updates to the UI are initiated by the callback.

Instead of this logic:

function doSomething() {
   var result = format(d);
   doSomethingWithResult(result);
}

You need to adapt to this:

function doSomething() {
   var result = format(d, doSomethingWithResult);
}

function format( d, callback ) {
   $.ajax(..., { 
      success : function(output) {

          var results = output.items[0];
          callback(results); // this is where we call doSomethingWithResult

      }
   });
}

Answer 2

Now I'm no exert at this, but hopefully you'll find something from the code-example that you can use.

I'm binding each row on the .done()-function, which calls another api. I hope this helps.

JS-FIDDLE

(function(){
    //getJSON example
    var jqxhr = $.getJSON( "https://api.myjson.com/bins/2emll", function(data) { 

        for (key in data) {
            $("#list").append("<li class='" + key + "'>" + data[key] + "</li>");
        }

    }).done(function( data ) {

        $("#list li").on("click", function(e){

            var target = e.target.className;

            //ajax example
             $.ajax({ 
                url: 'https://api.myjson.com/bins/309x5',         
                type: 'get',
                data: target,
                dataType: 'json',    
                success: function(data) {
                    var title = $("." + target).text();
                    $("." + target).html(title + '<ul id="ul-' + target + '"></ul>'); 
                }

           }).done(function(data){

                for (key in data) {
                    $("#ul-" + target).append("<li class='" + key + "'>" + data[key] + "</li>");
                }

           });

        });
    });
})();

Answer 3

you can try setting async option to false

like this

function format ( d )     
{  
   var results;
   $.ajax({ 
             url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/feedbacks/' +   d.FeedbackId + '/child/MudFeedbackDetailsVO?onlyData=true',
             type: 'get',
             dataType: 'json',
             async:false,    
             success: function(output) 
                {
                    console.log(output.items[0].CriticalPath) ; 
                    results =      output.items[0];        
            }
       });
return  results.CriticalPath;
}

NOTE : but it will make your ajax as synchronous and it may be possible that your browser will be unresponsive for the request so there are some points to be noted before using it

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

fore more information you can read here