javascript - Updating a div in the succes event of an Ajax call -
i executing 3 nested synchronous jquery ajax calls. inside success event handler of inner ajax call have updated div on html page. not taking effect on html page until calls completed.
my idea give updates users on page progress of process.
the inner ajax call uses information above 2 ajax calls. thats why if execute ajax calls synchronously gets wrong data inner ajax call due for loops
executed earlier main inner ajax call gets completed.
please @ these lines of code in below sample code:
// issue: line of code takes effect on html page after ajax calls completed $("<label>" + responsetext + "</label><br />").appendto('#dlghdbodycontainer');
sample code:
//asynchronous ajax function retrieve crm record using odata $.ajax({ type: "get", contenttype: "application/json; charset=utf-8", datatype: "json", url: odatauri, async: false, beforesend: function (xmlhttprequest) { //specifying header ensures results returned json. xmlhttprequest.setrequestheader("accept", "application/json"); }, success: function (data, textstatus, xmlhttprequest) { var customobjects1 = data.d.results; (var = 0; < customobjects1.length; i++) { var customobject1id = customobjects1[i].cc_customobject1id; var activityid = customobjects1[i].activity.id; var customobject1name = customobjects1[i].name; if (customobjects1[i].activity.id != null) { //asynchronous ajax function retrieve crm record using odata $.ajax({ type: "get", contenttype: "application/json; charset=utf-8", datatype: "json", url: odatauri, async: false, beforesend: function (xmlhttprequest) { //specifying header ensures results returned json. xmlhttprequest.setrequestheader("accept", "application/json"); }, success: function (data2, textstatus, xmlhttprequest) { if (data2.d.results.length > 0) { var customlists = data2.d.results; var odata_entitycollection = "/cc_cloudcalltransactionsset"; (var = 0; < customlists.length; i++) { //debugger; var customlistid = customlists[0].itemid var pagenum = "1"; while (pagenum != "-1") { var ajaxobject = new object(); ajaxobject.cc_type = { value: 21 }; ajaxobject.cc_pin = pagenum; ajaxobject.cc_callhash = customobject1id + "," + activityid + "," + customlistid; // 300 characters max //parse entity object json jsonentity = window.json.stringify(ajaxobject); //asynchronous ajax function create crm record using odata $.ajax({ type: "post", contenttype: "application/json; charset=utf-8", datatype: "json", url: odata_endpoint + odata_entitycollection, async: false, data: jsonentity, beforesend: function (xmlhttprequest) { //specifying header ensures results returned json. xmlhttprequest.setrequestheader("accept", "application/json"); }, success: function (data, textstatus, xmlhttprequest) { var newcrmrecordcreated = data["d"]; pagenum = newcrmrecordcreated.cc_pin; var responsetext = newcrmrecordcreated.cc_response; //alert(responsetext); // issue: line of code takes effect on html page after ajax calls completed $("<label>" + responsetext + "</label><br />").appendto('#dlghdbodycontainer'); }, error: function (xmlhttprequest, textstatus, errorthrown) { pagenum = "-1"; return; } }); } } } }, error: function (xmlhttprequest, textstatus, errorthrown) { } }); }; } }, error: function (xmlhttprequest, textstatus, errorthrown) { } });
updated code:
suggested mplungjan updated code below. placed inner-most ajax call outside 2 ajax calls on dependent. placed code update div updatediv("some string");
@ different places in code. still page updating after code completes , browser returned control.
is there way udpate page updatediv
executed?
// send each list api (var = 0; < objlists.length; i++) { var list = objlists[i]; var pagenum = "1"; var responsetext = ""; updatediv("synch process started"); while (pagenum != "-1") { updatediv("processing page number " + pagenum); var crmobject = new object(); crmobject.cc_type = { value: 21 }; crmobject.cc_pin = pagenum; crmobject.cc_callhash = list.customobject1id + "," + list.activityid + "," + list.listid; // cc_callhash 300 characters max //parse entity object json jsonentity = window.json.stringify(crmobject); //asynchronous ajax function create crm record using odata $.ajax({ type: "post", contenttype: "application/json; charset=utf-8", datatype: "json", url: odata_endpoint + odata_entitycollection, async: false, data: jsonentity, beforesend: function (xmlhttprequest) { //specifying header ensures results returned json. xmlhttprequest.setrequestheader("accept", "application/json"); }, success: function (data, textstatus, xmlhttprequest) { var newcrmrecordcreated = data["d"]; pagenum = newcrmrecordcreated.cc_pin; responsetext = newcrmrecordcreated.cc_response; }, error: function (xmlhttprequest, textstatus, errorthrown) { pagenum = "-1"; return; } }); updatediv(responsetext); } // end: while (pagenum != "-1") } // end: (var = 0; < objlists.length; i++) function updatediv(responsetext) { $("<label>" + responsetext + "</label><br />").appendto('#dlghdbodycontainer'); }
you try:
$("<label>" + responsetext + "</label><br />").appendto('#dlghdbodycontainer').hide().show();
to force redraw.
Comments
Post a Comment