Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    333
    Thanks
    63
    Thanked 11 Times in 11 Posts

    delaying the retrieval of AJAX

    Hi there!

    The code below works fine, but I'd like the loading animation to be displayed for at least a second before delivering the AJAX result. Just for general user experience incase they have very fast connections. I've played around with counters which I presume is where the solution will be, but I really can't work it out. Any advice?

    Code:
    ajaxRequest.onreadystatechange = function(){
    var div = document.getElementById("mydiv" + gigid );
       
    if(ajaxRequest.readyState == 4){
    div.innerHTML=ajaxRequest.responseText;
    }
    else
    {
    div.innerHTML = "<img src='Images/icons/loading.gif' />";
    }
    }
    var queryString = "?mem=" + memberid + "&gig=" + gigid;
    var url = doSave ? "saveevent_save.php" : "saveevent_forget.php";
    ajaxRequest.open("GET", url + queryString, true);
    ajaxRequest.send(null); 
    }
    The only solutions I've managed to find online refer to jQuery, but I feel It must be possible with a counter?

    Cheers
    Patrick.
    Last edited by paddyfields; 05-03-2012 at 09:33 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Code:
            flag, resp = false;// globals	
    	setTimeout(delayDisplay,1000);
            div.innerHTML = "<img src='Images/icons/loading.gif' />";
    	var queryString = "?mem=" + memberid + "&gig=" + gigid;
    	var url = doSave ? "saveevent_save.php" : "saveevent_forget.php";
    	ajaxRequest.open("GET", url + queryString, true);
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			resp=ajaxRequest.responseText;
    			if (flag !== false)document.getElementById("mydiv" + gigid ).innerHTML=resp;
    		}
    	}
    	ajaxRequest.send(null); 
    }
    
    function delayDisplay(){
    	if(resp !== false){
    		document.getElementById("mydiv" + gigid ).innerHTML=resp;
    	}
    	else{
    		flag = "resp not displayed";	
    	}
    }

  • Users who have thanked DaveyErwin for this post:

    paddyfields (05-03-2012)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    333
    Thanks
    63
    Thanked 11 Times in 11 Posts
    Thank you so, so much, but this doesn't seem to work when I try it. There seems to be more opening curly brackets than closing?

    This is my full code... I've tried moving the brackets around but it still won't work.

    Code:
    //Browser Support Code
    function ajaxSaveEvent(doSave, gigid, memberid){
    var ajaxRequest;  // The variable that makes Ajax possible!
    	
    try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
    } catch (e){
    // Internet Explorer Browsers
    try{
     = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try{ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e){
    // Something went wrongalert("Your browser broke!");
    return false;
    }
    }}// Create a function that will receive data sent from the server
    flag, resp = false;// globals	
    	setTimeout(delayDisplay,1000);
            div.innerHTML = "<img src='Images/icons/loading.gif' />";
    	var queryString = "?mem=" + memberid + "&gig=" + gigid;
    	var url = doSave ? "saveevent_save.php" : "saveevent_forget.php";
    	ajaxRequest.open("GET", url + queryString, true);
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			resp=ajaxRequest.responseText;
    			if (flag !== false)document.getElementById("mydiv" + gigid ).innerHTML=resp;
    		}
    	}
    	ajaxRequest.send(null); 
    }
    
    function delayDisplay(){
    	if(resp !== false){
    		document.getElementById("mydiv" + gigid ).innerHTML=resp;
    	}
    	else{
    		flag = "resp not displayed";	
    	}
    }
    If you could help me out i'd really appreciate it, Javascript really isn't my strongpoint yet!

    Thanks.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    div.innerHTML = "<img src='Images/icons/loading.gif' />";
    oops , I messed that uo should be
    document.getElementById("mydiv" + gigid ).innerHTML = "<img src='Images/icons/loading.gif' />";
    try{
    = new ActiveXObject("Msxml2.XMLHTTP");
    you left out ...
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

    Code:
    //Browser Support Code
    function ajaxSaveEvent(doSave, gigid, memberid){
    	var ajaxRequest;  // The variable that makes Ajax possible!
    	
    	try{
    	// Opera 8.0+, Firefox, Safari
    		ajaxRequest = new XMLHttpRequest();
    	} catch (e){
    	// Internet Explorer Browsers
    		try{
     	      		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try{
    				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e){
    			// Something went wrongalert("Your browser broke!");
    				return false;
    			}
    		}
    	}// Create a function that will receive data sent from the server
    	flag, resp = false;// globals	
    	setTimeout(delayDisplay,1000);
            div.innerHTML = "<img src='Images/icons/loading.gif' />";
    	var queryString = "?mem=" + memberid + "&gig=" + gigid;
    	var url = doSave ? "saveevent_save.php" : "saveevent_forget.php";
    	ajaxRequest.open("GET", url + queryString, true);
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			resp=ajaxRequest.responseText;
    			if (flag !== false)document.getElementById("mydiv" + gigid ).innerHTML=resp;
    		}
    	}
    	ajaxRequest.send(null); 
    }
    
    function delayDisplay(){
    	if(resp !== false){
    		document.getElementById("mydiv" + gigid ).innerHTML=resp;
    	}
    	else{
    		flag = "resp not displayed";	
    	}
    }
    Last edited by DaveyErwin; 05-03-2012 at 11:30 PM.

  • Users who have thanked DaveyErwin for this post:

    paddyfields (05-04-2012)

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    333
    Thanks
    63
    Thanked 11 Times in 11 Posts
    Thanks.

    Where do you mean for me to put the document.getElementById("mydiv" + gigid ).innerHTML = "<img src='Images/icons/loading.gif' />";

    It doesn't appear to work like this..?

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Code:
    <body>
    <div id = "mydiv1"></div>
    </body>
    
    
    <script>
    gigId='';
    flag = false; 
    resp = false;
    //Browser Support Code
    function ajaxSaveEvent(doSave, gigid, memberid){
    	gigId = gigid;
    	var ajaxRequest;  // The variable that makes Ajax possible!
    	
    	try{
    	// Opera 8.0+, Firefox, Safari
    		ajaxRequest = new XMLHttpRequest();
    	} catch (e){
    	// Internet Explorer Browsers
    		try{
     	      		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try{
    				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e){
    			// Something went wrongalert("Your browser broke!");
    				return false;
    			}
    		}
    	}// Create a function that will receive data sent from the server
    	
    	setTimeout(delayDisplay,1000);
            document.getElementById("mydiv" + gigid ).innerHTML = "<img src='Images/icons/loading.gif' />";
    	var queryString = "?mem=" + memberid + "&gig=" + gigid;
    	var url = doSave ? "saveevent_save.php" : "saveevent_forget.php";
    
    	ajaxRequest.open("GET", url + queryString, true);
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			resp=ajaxRequest.responseText;
    			if (flag !== false)document.getElementById("mydiv" + gigid ).innerHTML=resp;
    		}
    	}
    	ajaxRequest.send(null); 
    }
    
    function delayDisplay(){
    	if(resp !== false){
    		document.getElementById("mydiv" + gigId ).innerHTML=resp;
    	}
    	else{
    		flag = "resp not displayed";	
    	}
    }
    
    ajaxSaveEvent(true, 1, 1)
    
    </script>

  • Users who have thanked DaveyErwin for this post:

    paddyfields (05-04-2012)

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    333
    Thanks
    63
    Thanked 11 Times in 11 Posts
    You Sir, are my new favourite person.


  •  

    Posting Permissions

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