0

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

2
Contributors
1
Reply
6
Views
8 Years
Discussion Span
Last Post by essential
0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.