Reload Ajax div tag after set amount of time

Question

Cheeki 0 Newbie Poster

17 Years Ago

Hello guys,

I don't know if there is already a solution for this but I'm having a lot of problems with re-loading the Ajax div tags.

At the moment I have two div tags in my main index.php file, called "flowchartDiv" and "buttondataDiv".
Now what I'm trying to do is when ever a image is clicked, "Image of a button", it is added to the database and the "flowchartDiv" must reload in-order to reflex the new button added to the database.

I will settle for the "flowchartDiv" reloading after a set time but I actually want the "flowchartDiv" to reload every time I click on the image buttons in the "buttondataDiv".
here is my code for index.php file:

<html>
  <head>
    <script type='text/javascript' src='ajax.js'>
   	window.onload=function(){
	setTimeout('getXMLHttp()',2000);
    </script>
   
 <title>PHP AJAX Example</title>
  </head>
  <body>
       <script>
       	getFlowButtons("popUp", "1")
       </script>
        <div id='flowchartDiv'>
       
        </div>
        <div id='buttondataDiv'>
       
        </div>
    <input type='button' onclick='loadButtons();' value='Edit'/>
  </body>
</html>

Here is my file:

function getXMLHttp()
{
  var xmlHttp
  try
  {
    //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    //Internet Explorer
    try
    {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
      try
      {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
      {
        alert("Your browser does not support AJAX!")
        return false;
      }
    }
  }
  return xmlHttp;
}

function getFlowButtons(popUp, flow_button_id)
{
  var xmlHttp = getXMLHttp();
 
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      HandleResponse(xmlHttp.responseText);
    }
  }

  xmlHttp.open("GET", 'ajax.php?action=getFlowButtons&
  value='+flow_button_id, true);
  xmlHttp.send(null);
}
function removeButtons(edit, button_id)
{
  var xmlHttp = getXMLHttp();
  var edit_Yes_No = edit;
  
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      HandleResponse(xmlHttp.responseText);
    }
  }
  xmlHttp.open("GET", 'ajax.php?action=RemoveButton&
  value='+button_id+'&value1='+edit_Yes_No, true);
  xmlHttp.send(null);
}

function loadButtons()
{
  var xmlHttp = getXMLHttp();
  var loadButton = "loadButton";
  
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      HandleButtonDataResponse(xmlHttp.responseText);
    }
  }
  xmlHttp.open('GET', 'ajax.php?action='+loadButton, true);
  xmlHttp.send(null);
}

function addTo(popUp, button_id, button_url)
{	
  var xmlHttp = getXMLHttp();
  
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      HandleResponse(xmlHttp.responseText);
	  setTimeout('getXMLHttp()',1000);
    }
  }
  xmlHttp.open("GET", 'ajax.php?action=addButton&
  value='+button_id+'&value1='+button_url, true);
  xmlHttp.send(null);
}

function HandleResponse(response)
{
  document.getElementById('flowchartDiv').innerHTML += response;
  setTimeout('getXMLHttp()',1000);
}
function HandleButtonDataResponse(response)
{
  document.getElementById('buttondataDiv').innerHTML += 
  response;
}

Now in the function HandleResponse(response) function you can see I have already tried to in corporate the timer but nothing is working at the moment.
Hope someone can help me
Take care

ajax javascript

2 Contributors
1 Reply
224 Views
14 Hours Discussion Span
Latest Post 17 Years Ago Latest Post by essential

Dani AI

Generated 7 Months Ago

Short summary of the immediate problems in the thread (refs: , ) and a practical fix.

The main issues in ’s code are: calling getXMLHttp() in setTimeout (that only returns an XHR factory, it does not perform the request), using innerHTML += response (causes duplicates if the server returns the full HTML), mixing an external <script src="ajax.js"> tag with inline onload code in the same tag, and using HTML-escaped ampersands (&) inside JS URL strings. ’s advice to schedule the next request from inside the success handler is the right pattern — schedule only after a confirmed successful response.

Concrete fixes and best-practices

Replace innerHTML += response with innerHTML = response if the server returns the whole flowchart HTML. If the server returns only deltas, return structured data (JSON) and append only the new items.
Always check both readyState === 4 and status === 200 before acting on responseText.
After a successful add/remove request, call the same refresh function (e.g. getFlowButtons(...)) inside the success handler instead of calling the XHR factory.
Use encodeURIComponent for query values and real ampersands (&) in JS URL strings.
Prefer passing a function to setTimeout (or use setInterval) and keep one timer id; clear any previous timer before starting a new one to avoid duplicate polling.

Minimal refresh pattern (replace server-specific details as needed):

function refreshFlow(id) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById('flowchartDiv').innerHTML = xhr.responseText;
      refreshTimer = setTimeout(function(){ refreshFlow(id); }, 5000);
    }
  };
  xhr.open('GET', 'ajax.php?action=getFlowButtons&value=' + encodeURIComponent(id) + '&_=' + Date.now(), true);
  xhr.send();
}

Notes: use a cache-busting _ param for GETs, use POST for write operations (addButton), and clear the timer (clearTimeout(refreshTimer)) when leaving the page or toggling editing to avoid runaway polling.

Reply to this topic

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.

essential 84 Posting Shark Featured Poster · Answer 1 · 2009-08-12T17:57:14+00:00

Hi cheeki,

here's a simple demo, showing a different way of calling your ajax request and how to set your own timer and make auto updates in your elements. And also i've revealed some of the lines behind, the used of ajax handler, this will give you a small bits of idea, on how you will be able to create your own, choice of classes and methods in your functions' using your own framework's...

Here's the sample-document:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css_level21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com :: DHTML / JavaScript / AJAX</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */

/* ]]> */
</style>

<script type="text/javascript">
// <![CDATA[

var Ajax = ( function() {
   this.xml = 0;
   if ( "XMLHttpRequest" in window ) { 
      this.xml = new XMLHttpRequest();
   } else if ( "ActiveXObject" in window ) {
      var prodId = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
      for ( x in prodId ) {
         if ( this.xml = new ActiveXObject( prodId[ x ] )) { 
         break;
         }
      } delete x;
   } else {
      if ( "createRequest" in window ) {
         this.xml = window.createRequest();
      } else {
         this.xml = 0;
      }
   }        
} ); Ajax.prototype = {
Ready : ( function( url, sets ) {
   if ( this.xml ) {
      sets.method = sets.method.toUpperCase();
      (( "overrideMimeType" in this.xml ) ? this.xml.overrideMimeType("text/xml") : this.xml ); 
        this.xml.onreadystatechange = ( function( ) {
            if ( { 4 : 4, complete : 4 }[ this.readyState ] ) {
            sets.onReady( this.responseText ); return;
            } sets.onReady( "Request Timeout!" );
         } );
   this.xml.open( sets.method, url, true );
   (( sets.method === "POST" ) ? this.xml.setRequestHeader("Content-Type", "application/www-x-form-urlencoded; " + sets.charset + ";" ) : this.xml );
   this.xml.send((( sets.method === "POST" ) ? " " : null ));
   } return false;
} )
}; var HandleResponse;
var getFlowButtons =  function( popup, flow_button_id ) {
   var popup = popup;
   var flow_button_id = flow_button_id;
   var path = "./ajax.php?" + encodeURIComponent( "action=getFlowerButtons&amp;value=" + flow_button_id );
var xmlHttp = new Ajax();
xmlHttp.Ready( path, {
   method : "GET",
   charset : "UTF-8", 
   onReady : ( HandleResponse = function( response ) { 
   var div; 
   (( div = document.getElementById("flowchartDiv")) ? div : document.all[ "flowchartDiv" ] ).innerHTML = response;
    var timer = setTimeout( "getFlowButtons('" + popup + "', '" + flow_button_id + "')", 5000 ); // default-timer : 5 seconds delay before it makes new updates.
 } ) } );
}; window.onload = function() {
   getFlowButtons( "popup", "1" );
}
// ]]>
</script>

</head>
<body id="xhtml11">
<div id="flowchartDiv">

</div>
</body>
</html>

exploited and abused under toughest conditions using Opera—browser