Hi Forum,
Mine is a typical situation about calling and processing multiple $.ajax call in a sequential order.
I have read number of blogs and article about how to get this done using deffered object
and associated methods (like when, then) availbale on Jquery 1.5 but somehow not able to structure it in my code.
Business Logic and Flow of operation:
1. Form has a ribbon button. Upon click of this button JavaScript function is being called.
2. This function uses Jquery 1.4, REST/odata ,$.ajax features to bring back set of data.
3. This result is stored in an array and array is sent to the another function which uses the same mechanism of jquery/ajax for further processing of the result.
4. In each of this function call I get multiple records, and then for each record I call another individual ajax request. (for loop)
5. In my ajax call if I set async = false then all is working fine but as soon as I change to the async = true all fall apart in terms of sequential execution of the business logic.
async = false defeats the purpose of using asynchronous mechanism and further more I read that from Jquery 1.8 async = false will be deprecated.
Below is my code sample. I have put comments against key area for better understanding.
If someone can shed light on how to carry these multiple/nested ajax call in correct order then it would be much appreciated.
Thanks for your time.
// Below function will be called from the Ribbon button function GetSites() { // Get customer sites. var oDataSelect = ""; var Customer = ""; var SiteArray = []; Customer = Xrm.Page.getAttribute("customerid").getValue(); if(Customer != null && Customer != "") { var CustomerID = Customer[0].id.replace("{","").replace("}",""); oDataSelect = Xrm.Page.context.getServerUrl() +"/xrmservices/2011/OrganizationData.svc/new_EntitySet?$select=columns&$filter=new_ParentCustomer/Id eq guid'" + CustomerID + "'" + ""; GetCustomerSites(oDataSelect,SiteArray ); } } function GetCustomerSites(oDataSelect,SiteArray ) { // Making first ajax request $.ajax({ type: "GET", async: false, // true gives me wrong results because of async nature contentType: "application/json; charset=utf-8", datatype: "json", url: oDataSelect , beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("Accept", "application/json"); }, success: function (data, textStatus, XmlHttpRequest) { // checking and processing result after sucessful operation. if(data.d.results.length == 0) { alert('No sites found.'); } else { for(var i = 0; i < data.d.results.length;i++) { SiteArray.push(data.d.results[i]); // add result to the array as this array. } } if(data.d.__next != null) // Check if more than 50 records exist { GetCustomerSites(data.d.__next,SiteArray); // call the same function again for next set of data } else { ProcessSite(SiteArray); // All records have been received,then send the array for the further processing. } }, error: function (xmlHttpRequest, textStatus, errorThrown) { alert("Status: " + textStatus + "; ErrorThrown: " + errorThrown); } }); } function ProcessSite(_SiteArray) { var FilterSite = []; // second array to hold filter records from the original collection. var oDataSelect = ""; if(_SiteArray.length == 0) { alert('No site found for this account.'); } else { for(var i = 0; i< _SiteArray.length;i++) { // Second round of ajax call // Each ajax response in this collection should work in a synchrnous fashion and get added to the second array(FilterSite) upon successful return. oDataSelect = Xrm.Page.context.getServerUrl() + "/xrmservices/2011/OrganizationData.svc/new_AnotheEntitySet?$select=colimns&$filter=new_SiteId/Id eq guid'" + _SiteArray[i].new_RealtedId + "'" ; $.ajax({ type: "GET", async: false, // again true gives me different result and some time fails... contentType: "application/json; charset=utf-8", datatype: "json", url: oDataSelect , beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("Accept", "application/json"); }, success: function (data, textStatus, XmlHttpRequest) { // I assume here is where I have to manage sucessfull callbacks for each request SiteExist(data.d.results); }, error: function (xmlHttpRequest, textStatus, errorThrown) { alert("Status: " + textStatus + "; ErrorThrown: " + errorThrown); } }); // end of ajax call. function SiteExist(FilterRecords) { if (FilterRecords.length == 0) // if not found, add it to the collection. { FilterSite.push(SupplyPoints[i]) } } } // end for loop. Up to here all the calls of the above for loop elements should get over before further processing. // After getting desired result from the above for loop collection,want to fire another round of ajax calls for different operation of the same collection. if(FilterSite.length > 0) { AnotherFunction(FilterSite) // this function will also make muliple $.ajax calls to modified the records in the collection. } } } // end function