View Full Version : how to use multiple ajax calls one after the end of the other

11-15-2015, 05:59 PM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

I would like multiple ajax calls one after the end of the other to update MYSQL database like below -

function toggle_group(id)
var group = "group_"+id;
var url1="menu_handler.php?tool=toggle_group&id="+id;
var url2="menu_handler.php?tool=update_group&id="+id;

if (document.getElementById(group).style.display=='block')
document.getElementById(group).style.display ='none';
else if (document.getElementById(group).style.display=='none')
document.getElementById(group).style.display ='block';
loadContent(url1,group) ;

var url="menu_handler.php?tool=update_total";
loadContent(url2,'display-total') ;



function dynamic_update(loc,target)

function loadContent(url,content_id)
var d = new Date();
var r = d.getTime();
document.getElementById(content_id).innerHTML = '<center><img src="../images/loding-small.gif" border="0" alt=""><\/center>';
dynamic_update(url+"&r="+r, content_id);


Can I call loadContent(url2,'display-total') AFTER loadContent(url1,group) has finished execution?

11-16-2015, 07:16 AM
Hmm there's no loadContent() function inside Dynamic Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm)...

11-17-2015, 03:43 PM
Hmm there's no loadContent() function inside Dynamic Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm)...

Thanks. Can I call loadpage(page_request, containerid) multiple times i.e one after the end of the other?

page_request = "page_a.php?id=1";
loadpage(page_request, containerid);

page_request = "page_a.php?id=2";
loadpage(page_request, containerid);

11-18-2015, 06:17 PM
You might try the following modified script, which adds support for an optional call back function inside loadpage(), so you can run custom code at the end of the loading of the page, such as calling loadpage() again to load a subsequent HTML file:

<script type="text/javascript">

* Dynamic Ajax Content- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid, callback){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false
page_request._callback = callback || function(){}
loadpage(page_request, containerid)
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
if (!page_request._callbackinvoked){
page_request._callbackinvoked = true

function loadobjs(){
if (!document.getElementById)
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref.setAttribute("src", file);
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
if (fileref!=""){
loadedobjects+=file+" " //Remember this object as being already added to page


With the modified script, you could do something like the following:

page_request = "page_a.php?id=1";
loadpage(page_request, containerid, function(){alert('done')});


loadpage("page_a.php?id=1", containerid, function(){
loadpage("page_a.php?id=2", containerid2) // load another page into another DIV container

or even:

loadpage("page_a.php?id=1", containerid, function(){
loadpage("page_a.php?id=2", containerid2, function(){ // load another page into another DIV container
loadpage("page_a.php?id=3", containerid3) // load another page into another DIV container

However, if you're looking to chain more than 1 or 2 page loads, you may want to simply use jQuery and take advantage of their more robust ajax functions to simplify making sequential Ajax calls.