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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts

    AJAX Loading message

    I have a search bar which list users depend what the person types which works well, however its a little slow and i'd like to show a loading message, how would i go about doing it?

    Here's what i have so far

    Code:
    <script type="text/javascript">
    function showResult(str)
    {
    	if (str.length==0) {
    		document.getElementById("livesearch").innerHTML="";
    		document.getElementById("livesearch").style.border="0px";
      		return;
      	}
    	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    		xmlhttp=new XMLHttpRequest();
      	}
    	else {// code for IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      	}
    	xmlhttp.onreadystatechange=function() {
      		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    			document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
        		document.getElementById("livesearch").style.border="1px solid #A5ACB2";
        	}
      	}
    	xmlhttp.open("GET","livesearch.php?u="+str,true);
    	xmlhttp.send();
    }
    </script>
    </head>
    
    <body>
    <form>
    <input type="text" size="30" style="width:300px;" onkeyup="showResult(this.value)" />
    <div id="livesearch" style="width:300px;" ></div>
    </form>
    I'd guess it would be a readyState thing but thats just a guess, im new to AJAX >.<

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by tomharto View Post

    Code:
    <script type="text/javascript">
    function showResult(str)
    {
        if (str.length==0) {
            document.getElementById("livesearch").innerHTML="";
            document.getElementById("livesearch").style.border="0px";
              return;
          }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
          }
        else {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function() {
              if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                document.getElementById("livesearch").style.border="1px solid #A5ACB2";
                document.getElementById('loadingDiv').style.display = 'none';
            }
          }
        xmlhttp.open("GET","livesearch.php?u="+str,true);
        xmlhttp.send();
        document.getElementById('loadingDiv').style.display = 'block';
    }
    </script>
    </head>
    
    <body>
    <form>
    <input type="text" size="30" style="width:300px;" onkeyup="showResult(this.value)" />
    <div id="livesearch" style="width:300px;" ></div>
    </form>
    You could try something like the red bits.

    First create a container with id = 'loadingDiv' that is hidden on page load. In it put your loading message.

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    I tried that but it didnt work . Does the display:block need to be earlier maybe?

    Code:
    <script type="text/javascript">
    function showResult(str)
    {
        if (str.length==0) {
            document.getElementById("livesearch").innerHTML="";
            document.getElementById("livesearch").style.border="0px";
              return;
          }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
          }
        else {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function() {
              if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                document.getElementById("livesearch").style.border="1px solid #A5ACB2";
                document.getElementById('loadingDiv').style.display = 'none';
            }
          }
        xmlhttp.open("GET","livesearch.php?u="+str,true);
        xmlhttp.send();
        document.getElementById('loadingDiv').style.display = 'block';
    }
    </script>
    </head>
    
    <body>
    <form>
    <input type="text" size="30" style="width:300px;" onkeyup="showResult(this.value)" />
    <div class="loadingDiv" style="display:none;">Loading&hellip;</div>
    <div id="livesearch" style="width:300px;" ></div>
    </form>
    EDIT: DUH just noticed i had class rather than ID >.<. It works great thanks . JW if i wanted to use class rather than ID would i just put getElementByClass?

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by tomharto View Post
    ]EDIT: DUH just noticed i had class rather than ID >.<. It works great thanks . JW if i wanted to use class rather than ID would i just put getElementByClass?
    No problem

    You could assign the div a class and then use a "getElementsByClass" function but it will return an array of elements with that class name. You would then need refer to a specific element by its index value in the array or loop through the array.

  • Users who have thanked bullant for this post:

    tomharto (06-02-2011)


  •  

    Posting Permissions

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