Reload Ajax div tag after set amount of time

Question

Cheeki 0 Newbie Poster

15 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 ajax.js 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

javascript

2 Contributors
1 Reply
212 Views
14 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by essential

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