[AJAX] Meerdere divs verversen

[Currahee]

Sinds kort heb ik mij gestort op het programmeren van een nieuwe website, en in deze website maak ik ook, voor het eerst, veel gebruik van javascript/ajax. De simpele javascript wil wel, maar momenteel loop ik tegen een probleem aan.

Onderstaand script heb ik van een forum geplukt en hier en daar aangepast om het mogelijk te maken data vanaf een pagina in te laden in een bepaalde div. Deze div ververst dan na een aantal seconden door gebruik te maken van de functie setTimeOut. Nu wilde ik zojuist een tweede div op dezelfde pagina verversen door middel van onderstaand script, echter er treed dan een probleem op (Met één div werkt het script dus wel goed) Het script zet dan dezelfde data in beide divs.

Ik heb al verschillende zaken geprobeerd, zoals het weghalen van de variabelen en deze in de functie vervangen door de input (als het ware twee aparte functies creëren voor beide divs). Deze pogingen werkten echter ook niet. Iemand enig idee hoe ik dit probleem kan oplossen?

Alvast bedankt voor de suggesties

JavaScript:

function refresh(url,target)
 {
    // native XMLHttpRequest object
   document.getElementById(target).innerHTML = "<img src='/images/loader.gif' alt='Data ophalen...' />";
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
       req.onreadystatechange = function() {ajaxDone(target);};
       req.open("GET", url, true);
       req.send(null);
   // IE/Windows ActiveX version
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
       if (req) {
           req.onreadystatechange = function() {ajaxDone(target);};
           req.open("GET", url, true);
           req.send();
       }
   }
           setTimeout("refresh('" + url + "','" + target + "')", 10000);
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:\n" +
req.statusText;
}
}
}

[Daspeed]

Tenzij je graag het wiel opnieuw uitvindt (om er van te leren), zou ik gebruik maken van een standaard javascript/ajax library. Dat scheelt namelijk veel tijd en ongemak.

Om zo maar even wat libraries op te noemen:
- jQuery
- MochiKit
- Prototype
- DOJO

[kluyze]

Hoe wil je die 2de div dan vullen? En belangrijker, hoe ga je die div herkennen? Ga je een 2de div met hetzelfde ID maken? Je javascript gaat de div met het id target vullen. Om 2 div's te vullen heb je dus 2 targets nodig.

[ Voor 9% gewijzigd door kluyze op 11-06-2009 21:31 ]

[BtM909]

Klein tikje naar WEB.

Hoe roep je refresh aan en hoe vaak?

[Currahee]

De refresh wordt twee keer aangeroepen vanuit een functie die in de body onload wordt ingeladen. Ik zal eerst kijken of ik met de libaries van DaSpeed wat kan, het wiel opnieuw uitvinden is niet nodig natuurlijk.

Excuses voor het verkeerd plaatsen van het topic.

[Bosmonster]

Currahee schreef op donderdag 11 juni 2009 @ 21:50:
De refresh wordt twee keer aangeroepen vanuit een functie die in de body onload wordt ingeladen. Ik zal eerst kijken of ik met de libaries van DaSpeed wat kan, het wiel opnieuw uitvinden is niet nodig natuurlijk.

Excuses voor het verkeerd plaatsen van het topic.

Als je simpelweg een html pagina in wilt laden in een div kan ik jQuery aanraden:

JavaScript:

$('div#content').load('bestand.html');

Simpeler kan denk ik niet. Je kunt zelfs nog extra selectors opgeven, maar die heb je volgens mij niet eens nodig in dit geval. Standaard neemt ie gewoon de inhoud van de body-tag.

[ Voor 3% gewijzigd door Bosmonster op 12-06-2009 01:11 ]

[Currahee]

Ik heb het op de volgende manier opgelost, met dank aan jQuery.

JavaScript:

$(document).ready(function(){
    $('div').load('url');

    var refreshId = setInterval(function()
    {
        $('div').load('url');
    }, 10000);
  });

Alleen gebruik maken van de functie in setInterval werkt niet, omdat je dan de eerste, in dit geval, 10 seconden geen data weergegeven krijgt. Moet alleen nog even proberen er een loading gif in te krijgen.

Bedankt voor de input.

[crisp]

Je zou nog zoiets kunnen doen:

JavaScript:

(function()
{
    $('div').load('url');
    setTimeout(arguments.callee, 10000);
})();