Member Avatar for whiteyoh

Hi All,

At the minute I have a script, that ill post below, that simple echos out some information via ajax.

My question is, how do i get the update without using meta refresh and without clicking anything at all?

<html>
<head>
<script type="text/javascript">
function showHint(str)
{

  if (window.XMLHttpRequest)
    xmlhttp = new XMLHttpRequest();
  else
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

  xmlhttp.onreadystatechange = function()
  {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
      document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
  };
  xmlhttp.open("GET", "timer1.php" + str, true);
  xmlhttp.send(null);
}
</script>
</head>
<body>
<meta http-equiv="refresh" content="1;url=ajax1.php">
<form action=""> 
<input type="hidden" id="txt1" onkeyup="showHint(this.value);" />
</form>
<p><span id="txtHint"></span></p> 

</body>
</html>

<script type="text/javascript">

showHint("");
</script>
<?php
getConnection();
$SQL = "SELECT email FROM tbl_emailtest ORDER BY email ASC";
$result = mysql_query($SQL);
while ($row = mysql_fetch_array($result)){
	echo $row['email'];
	echo "<br>";
}
?>
  • 2 Contributors
  • 5 Replies
  • 120 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by whiteyoh
Member Avatar for Taywin

You could use setTimeout() or setTimeinterval() in order to keep calling your Ajax script function (showHint()). You could change the bottom of your page from

<script type="text/javascript">
showHint("")
</script>

to somewhat like (not the best coding, but just to give you an idea)

<script type="text/javascript">
function keepCalling() {
  showHint("")
  window.setTimeout("keepCalling()", 1000)  // call the showHint every 1 second
}

keepCalling()
</script>
Edited by Taywin because: n/a
Member Avatar for whiteyoh

that works a treat, thank you. can you think of any methods that would do the same without the page flickerng?

Member Avatar for Taywin

I do not know how big the area in a page that you keep the update on. The bigger the area is, the more flickering you would see. Also, the time interval of updating could impact the flickering as well. You may lengthen the time if you want, but it depends on your application. I am not sure whether or not your ajax call (time1.php) requires to be every second.

Member Avatar for whiteyoh

The amount of data used is only a small amount. I wonder how a clock can update itself without any flicker, yet a few records of data causes a whole screen to refresh?

Are there any tips out there to minimise this?

<script>function showhint(str) {
               
            original_content = document.getElementById(divID).innerHTML; // NewLine!
            
            var XMLHttpRequestObject = false;

               if (window.XMLHttpRequest) {
                       XMLHttpRequestObject = new XMLHttpRequest();
                       } else if (window.ActiveXObject) {
                       XMLHttpRequestObject = new
                       ActiveXObject("Microsoft.XMLHttp");
                       }


               if(XMLHttpRequestObject) {
               var obj = document.getElementById(divID);
            document.getElementById(divID).innerHTML = original_content; // Altered line to not show 'nothing'

                       XMLHttpRequestObject.open("GET", "console1.php, true);
                       XMLHttpRequestObject.onreadystatechange = function()
                       {

                               if (XMLHttpRequestObject.readyState == 4 &&
                                       XMLHttpRequestObject.status == 200) {
                                       obj.innerHTML = XMLHttpRequestObject.responseText;
                                       delete XMLHttpRequestObject;
                                       XMLHttpRequestObject = null;
                                       }
                       }
               XMLHttpRequestObject.send(null);
               }
       }
</script>
<script>showHint(this.value)</script>
<script type="text/javascript">
      function keepCalling() {
      showHint("")
      window.setTimeout("keepCalling()", 1000) // call the showHint every 1 second
      }
      keepCalling()
</script>
Member Avatar for whiteyoh

hi all, Been playing around and got it to refresh with no flickering.

In the code is a scroll bar. Is there anyway i can temporarily cancel the refresh if i were to click on the scroll bar, then resume on clicking away?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.