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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation ajax form loading (while waiting)

    Hi, i made a php application that shows the results with ajax (without page reloading), the request it's made in 30 sec, it;s too much and the user will think that the application doesn't work, so i want to put a preloader or a loading script.

    PS: i searched on google and i found just 2-3 scripts that don't work.
    Thanks.

  • #2
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    In Firefox, you can use the onprogress event handler, though IE doesn't have anything similar, so I'm not sure how you'd implement a cross browser "progress bar" for your Ajax request.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #3
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Can you show us your basic code for the Ajax call. With that, we can give you some pointers on how to show a waiting message.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the ajax code.
    Code:
    <script type="text/javascript" language="javascript">
    var xmlHttp
    
    function showUser(str)
    { 
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
     {
     alert ("Browser does not support HTTP Request")
     return
     } 
    var url="namefinder.php"
         var params = "results=" + escape(encodeURI( document.getElementById("results").value )) +
                        "&extension=" + escape(encodeURI( document.getElementById("extension").value )) +
                        "&no=" + escape(encodeURIComponent( document.getElementById("no").value )) +
                        "&kind=" + escape(encodeURI( document.getElementById("kind").value )) +
                        "&cv=" + escape(encodeURI( document.getElementById("cv").value ));
                        
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("POST",url,true)
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-Length", params.length);
    
    xmlHttp.send(params)
    }
    
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
     document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
     } 
    }
    
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
     {
     // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
     }
    catch (e)
     {
     //Internet Explorer
     try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
     catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     }
    return xmlHttp;
    }
    </script>
    Thanks you for your time !

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    It is better if you switched these two lines.

    xmlHttp.onreadystatechange=stateChanged
    xmlHttp.open("POST",url,true)

    It really does not matter in your case, but it is better practice to do so

    well there is a few thing syou can do. Easiest thing you can do is add a div to your page and maybe use an activity indicator: http://www.webscriptlab.com/index.php

    Code:
    <div id="loadingMsg" style="display:none;position: absolute;background-color:#CCC;width:200px; height:200px;text-align:center;top:100;left:100">Loading Please Wait</div>
    Before the open statement you show the div

    Code:
    document.getElementById("loadingMsg").style.display = "block";
    xmlHttp.open("POST",url,true)

    and hide it when the response is back

    Code:
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
      document.getElementById("loadingMsg").style.display = "none";
      if(xmlHttp.status == 200)
        {
          document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
        }
        else
        {
          alert("Error reading data");
        }
     } 
    }

    Hope that helps

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cosminx2003,

    I have done something similar to the older gmail "Loading..." message.
    In fact, I nicked it of their pages, end implemented it inside my AJAX class.

    on my page:
    Code:
    <body><div id="ajaxstatus" style="visibility: hidden;">Loading...</div>
    in my AJAX class:
    Code:
    //function HttpClient() {};
    var HttpClient = Class.create();
    HttpClient.prototype = {
    	requestType: 'GET',
    	isAsync: false,
    	xmlHttp: false,
    	onCallback: false,
    	contentDiv: false,
    	statusDiv: 'ajaxstatus',
    	removeDivOnError: false,
    
    	initialize: function(div) {
    		this.contentDiv = div;
    	},
    
    	onSend: function() {
    		if (this.statusDiv) {
    			document.getElementById(this.statusDiv).style.visibility = 'visible';
    		}
    	},
    
    	onLoad: function() {		
    		if (this.statusDiv) {
    			document.getElementById(this.statusDiv).style.visibility = 'hidden';
    		}
    	},
    etc...
    PS... gmail has changed it from being red in the right upper corner to yellow in the middle of the page...

    Hope this helps,
    Rory
    Last edited by djBo; 07-25-2008 at 01:01 PM. Reason: added PS...


  •  

    Posting Permissions

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