We help IT Professionals succeed at work.
Get Started

AJAX update multiple divs from external .php's without reload

aling
aling asked
on
1,331 Views
Last Modified: 2011-01-13
Hi there,

I'm in the process of writing a small forum/message board and like to use AJAX for content updating instead of a complete refresh of the page.

I got the AJAX part running, but when updating multiple divs, the script 'collides' and the divs stop updating... Yelp?

The javascript/ajax part (ajax_test.php)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX test page</title>
<style type="text/css">
body { font-family: verdana; font-size: 8pt; }
</style>
<script type="text/javascript">
function createRequestObject() {
    var req;
    if(window.XMLHttpRequest){
    // Firefox, Safari, Opera...
        req = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
    // Internet Explorer 5+
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
    // There is an error creating the object,
    // just as an old browser is being used.
        alert('There was a problem creating the XMLHttpRequest object');
    }
    return req;
}

function handleDivTag(divtag) {
    var divtag;
    return divtag;
}

function handleTimeOut(timeout) {
    var timeout;
    return timeout;
}

function handleRefresh(refresh) {
    var refresh;
    return refresh;
}

// Create the Divtag Handler -- Mainly an IE 6 Fix
var divhandler = new handleDivTag(null);
var timehandler = new handleTimeOut(null);
var refreshhandler = new handleRefresh(null);

function sendRequest(act,divtag,timeout,refresh) {
    // Make the XMLHttpRequest object
    http = createRequestObject();
    // Open PHP script for requests
    http.open('get', act);
    http.onreadystatechange = function() { handleResponse(http); };    
    // Open PHP script for requests
    divhandler.divtag = divtag;
    timehandler.timeout = timeout;
    refreshhandler.refresh = refresh;
    http.send(null);
}

function handleResponse(http) {
    if(http.readyState == 4 && http.status == 200) {
        // Text returned FROM PHP script
        var response = http.responseText;
        // document.write(http.responseText);
        if(response) {
            // UPDATE ajaxTest content
            document.getElementById(divhandler.divtag).innerHTML = response;
            setTimeout(timehandler.timeout,refreshhandler.refresh);
        }
    }
}
 
function div1() {sendRequest('page.php','div1',div1,1000); }
function div2() {sendRequest('page.php','div2',div2,1000); }
</script>
</head>
<body onload=''>
<b>div1</b><br>
<div id="div1"><?php include ("page.php") ?></div>
<br>
<b>div2</b><br>
<div id="div2"><?php include ("page.php") ?></div>
<br>
<a href="javascript:div1();">Start refreshing div1</a>
<a href="javascript:div2();">Start refreshing div2</a>
</body>
</html>

...and the content page (page.php)

<?php
echo "System time: ".date("G:i:s",time());
//sleep (1);
?>

This works fine until the refresh collides. Uncommenting the sleep statement demonstrates this perfectly...

-tnx-

Harold.
Comment
Watch Question
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE