Results 1 to 4 of 4

Thread: how to use multiple ajax calls one after the end of the other

  1. #1
    Join Date
    Nov 2015
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default how to use multiple ajax calls one after the end of the other

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem:

    Hi
    I would like multiple ajax calls one after the end of the other to update MYSQL database like below -
    Code:
    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)
    {
    	ajaxpage(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?
    Last edited by Beverleyh; 11-15-2015 at 06:01 PM. Reason: Formatting

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm there's no loadContent() function inside Dynamic Ajax Content...
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    sroy (11-16-2015)

  4. #3
    Join Date
    Nov 2015
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Hmm there's no loadContent() function inside Dynamic Ajax Content...
    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);

  5. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request._callback = callback || function(){}
    page_request.onreadystatechange=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)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    if (!page_request._callbackinvoked){
    	page_request._callback()
    	page_request._callbackinvoked = true
    }
    }
    
    function loadobjs(){
    if (!document.getElementById)
    return
    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=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    </script>
    With the modified script, you could do something like the following:

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

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

    Code:
    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.
    DD Admin

Similar Threads

  1. Multiple Ajax calls on one page
    By Morisatwork in forum JavaScript
    Replies: 12
    Last Post: 04-28-2016, 03:23 AM
  2. Resolved Ajax - simultaneous calls -or stacking requests in que
    By crobinson42 in forum JavaScript
    Replies: 4
    Last Post: 04-02-2012, 10:33 PM
  3. How to make 2 ajax calls in sequence?
    By gylim78 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-01-2011, 10:08 AM
  4. Replies: 7
    Last Post: 02-04-2009, 11:20 PM
  5. Dynamic Ajax Content loads once every two calls
    By hcvitto in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-17-2007, 11:04 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •