AJAX update 2+ divjes vanuit externe .php's zonder reload - Softwareontwikkeling

vrijdag 16 juni 2006 11:55

Acties:

Topicstarter

Hallee!

Welkom bij mijn eerste AJAX probeersel! Ik probeer meerdere divjes te updaten vanuit een .php pagina. Dit werkt goed, totdat de updates elkaar in de weg gaan zitten, dan stop het script met updaten.

Het javascript/ajax gedeelte (ajax_test.php)

code:

<!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>

...en de inhoud (page.php)

code:

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

Dit werkt perfect totdat de updates botsen. Als je de 'sleep' uncomment dan kun je precies zien wat ik bedoel.

-tnx-

Harold.

vrijdag 16 juni 2006 13:47

Acties:

Verwijderd

Ik kom er niet precies achter wat er mis gaat maar je gebruikt een globale variabele voor je request object. Die moet sowieso locaal zijn, anders overschrijft elke request de vorige.

JavaScript:

1	var http = createRequestObject();

vrijdag 16 juni 2006 14:06

Acties:

haling

Topicstarter

Jij bedoeld:

code:

1
2
3

function sendRequest(act,divtag,timeout,refresh) {
    // Make the XMLHttpRequest object
    [b]var[/b] http = createRequestObject();

...dat maakt het juist erger...

De 2e div refreshed dan niet meer...

vrijdag 16 juni 2006 15:00

Acties:

crisp

Devver

Pixelated

Hetzelfde geldt ook voor je divhandler, timehandler en refreshhandler; allemaal global...

Intentionally left blank

vrijdag 16 juni 2006 15:59

Acties:

haling

Topicstarter

Ik heb het al opgelost met prototype

DIt is een library met ook een ajax-refresh functie...