In my code, I have an ajax call that triggers another ajax call based on its return value. The URL parameter of the second call is modified by the output of the first one. These two calls are interrelated as the first call feeds the URL parameter for the second call. The output of the second call is then appended to a global variable, which is used to generate a final HTML set that is further appended in the first call. Here's a simplified example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var masterHtml = '';
// First Ajax Call
$.ajax({
url: "http://thisisanexample/items",
type: "GET",
asynch: false,
contentType: "application/json;odata=verbose",
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data) {
successHandler(data);
},
error: function(data) {
}
});
function successHandler(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
var someHtml = results[i]["someHtml"];
masterHtml = masterHtml + someHtml;
var nextThingUrl = results[i]["nextThingUrl"];
// Second Ajax Call
$.ajax({
url: "http://thisisanexample/+ " + nextThingUrl,
type: "GET",
asynch: false,
contentType: "application/json;odata=verbose",
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data) {
successHandlerChildren(data);
},
error: function(data) {
}
});
jQuery('#magictime').append(masterHtml);
}
}
function successHandlerChildren(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
var someMoreHtml = results[i]["someMoreHtml"];
masterHtml = masterHtml + someMoreHtml;
}
}The issue I'm facing is that the first ajax call always completes before the second call is made, resulting in the incorrect order of operations. The first call provides the initial HTML while the second call provides additional HTML needed. What am I overlooking? Any help would be greatly appreciated! Thanks in advance!