Ajax/Javascript refresh

[Cyberjunkie]

Beste lezer,

Ik zit met het volgende probleem. Ik laad een javascript chart via ajax in de pagina. Maar het
probleem is dat de pagina al gerenderd is waardoor de <div> niet wordt ingeleden. In laad
het met de volgende code

function showstatistiekenbezoekers(idNumber)
{
 if (idNumber=="")
   {
   document.getElementById("bezoekersstatistieken").innerHTML="";
   return;
   } 
 if (window.XMLHttpRequest)
   {
   xmlhttp=new XMLHttpRequest();
   }
 else
   {
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");	
   }
 xmlhttp.onreadystatechange=function()
   {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("bezoekersstatistieken").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","getBezoekers.php?get="+idNumber,true);
 xmlhttp.send();
}

En "getBezoekers" laad vervolgens een table met daarin de <div id = "graph">. Maar wat ik al aangaf
rendert vervolgens javascript de opgegeven div niet na een chart. Is dit mogelijk doormiddel van een
xmlhttp.refresh of iets dergelijks ?

Met Vriendelijke Groet en bij voorbaat dank,

 

[Tha Devil]

Wordt deze functie überhaupt wel aangeroepen?

Zonder dat je ergens showstatistiekenbezoekers(12); (bijvoorbeeld) aanroept wordt er natuurlijk niks gedaan.
Heb je bevestigd dat in de variabele xmlhttp.responseText wel iets wordt opgeslagen?

 

[Cyberjunkie]

Hallo The Devil,

Ja ik roep de functie aan met de juiste parameter. En dezelfde script al vaker gebruikt dus die werkt
zonder twijfel. De code wordt ook al ingevoegd alleen de div wordt niet gepakt door de bijbehorende
javascript. ( zonder ajax load werkt deze prima )

 

[Tha Devil]

Als ik deze basis AJAX-functionaliteit naast jouw code leg dan merk ik dat het aanmaken van var xmlhttp; mist. Wellicht is dat de oorzaak.

Ook kan het probleem hier liggen:
[js]
xmlhttp.open("GET","getBezoekers.php?get="+idNumber,true);
[/js]
Volgens mij dien je een volledige URL te gebruiken en niet alleen maar een bepaalde pagina.
Dit kun je dynamisch houden door bijvoorbeeld dit te doen:
[js]
xmlhttp.open("GET", ""+ document.location.origin +"/getBezoekers.php?get="+idNumber,true);
[/js]

 

[CaptainBri]

Volgens mij dien je een volledige URL te gebruiken en niet alleen maar een bepaalde pagina.

Je kan gewoon een bestand/script/etc aanroepen zonder de volledige URL, dit pakt ie prima op. Ook op w3schools te zien, dus daar ligt het probleem niet aan.

Ik zou je aanraden om even met een javascript debugger te gaan debuggen, zoals Firebug in Firefox. Hoogstwaarschijnlijk zal dan de fout zichtbaar worden.

 

[Cyberjunkie]

Bedankt voor alles reacties. Maar zoals ik al aangaf weet ik de bug al. Ik laad dus via ajax een <div> in die door een javascript
op de pagina wordt omgezet in een chart. Dit gebeurd bij runtime, de javascript wordt uitgevoerd en rendert/verandert de desbetreffende
<div> in de mooie grafische chart. Maar omdat ik dus de chart <div> inlaad nadat de javascript is uitgevoerd bij runtime, wordt de
div niet veranderd. Dus nu zoek ik dus een manier om alsnog die javascript opnieuw uit te voeren.

Dus om nog een keer te benadrukken, de script werkt en alle ingeladen codes worden weergeven in de html.

 

[csshunter]

Is het dan niet op te lossen door het render-script (van de onload) in een functie te zetten,
en die op het eind van de function showstatistiekenbezoekers(idNumber) nogmaals aan te roepen?

Met vriendelijke groet,
CSShunter

 

[CaptainBri]

Dus, als ik het goed begrijp laad je een chart in een div element. Vervolgens wil je code uitvoeren die iets met de ingeladen chart doet? Wellicht .ready van jQuery een idee?

 

[Tha Devil]

Dus als ik het goed begrijp laad je bij de eerste weergave van de pagina een grafiek in.

Vervolgens kan men op die pagina op een link of iets dergelijks klikken waardoor de grafiek opnieuw geladen moet worden?

 

[csshunter]

Misschien is het wel zo handig om een testpagina online te zetten met de minimale ingrediënten waarmee het probleem zichtbaar wordt?

 

[tiran818]

Geeft je getBezoekers.php die div al gevuld door of ga je daarna nog wat doen met de ingeladen code?
Als je iets in de div gaat gooien nadat je de div hebt gekregen moet je dat in de callback van de AJAX functie doen. Anders heb je kans dat de div nog niet bestaat als je hem probeert te vullen, maar net een paar miliseconden daarna pas.
Als dat je probleem niet oplost is het misschien een idee om inderdaad zoals eerder gezegd de code online te plaatsen, dan kunnen wij er ook even mee proberen.

 

[That Guy]

Wat je moet doen is je content en script scheiden. Ofwel: laad alleen de HTML via XHR, niet de Javascript. Als dit geladen is, ga je pas (of: weer) aan de gang met Javascript:


[JS]function LaadMijnBeesje()
{
var xhr = new XMLHttpRequest();

xhr.addEventListener('readystatechange', function()
{
if(xhr.readyState === 4)
{
// output data naar element
document.getElementById('output').innerHTML = xhr.responseText;

// NU iets doen met die data
doeIetsMetData();
}
});

xhr.send();
}


function doeIetsMetData()
{
// doe iets met de data in document.getElementById('output');
maakMooieGrafiek( document.getElementById('output') );
}[/JS]


:thumb: