AJAX Loading message

tomharto · 06-01-2011, 11:29 AM

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 >.<

bullant · 06-01-2011, 12:15 PM

Quote:

Originally Posted by tomharto

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.

tomharto · 06-01-2011, 01:12 PM

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?

bullant · 06-02-2011, 12:47 AM

Quote:

Originally Posted by tomharto

]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.