array gevuld en toch undefined

[JeroenE]

Hallo,

Hier komen meerdere scripts aan te pas: javascript (waar ik de foutmelding krijg), php en ajax.

Het doel:

Door op een link te klikken een div verbergen en een andere tevoorschijn halen. Dit werkt.
In die laatste div een slideshow starten met afbeeldingen uit een specifieke map die verschillend is per categorie. Hier gebeurt er niets

De foutmelding die ik in de ontwikkelingstools vind, is "aimages[nimg]" is undefined

De code bestaat uit verschillende delen.

De link:

<a href="javascript:void(0);" onclick="javascript:fgetcategory(1);">link</a>

De functies: [JS]
var aimages = new Array();
var nimg;
var nnum = 0;
function ffadebg() {
document.getElementById('backgrounddiv').style.opacity = nimgop;
if (!bfadein && (nimgop > 0)) {
nimgop = nimgop - 0.05;
setTimeout('ffadebg();', 20);
} else if (!bfadein && (nimgop <= 0)) {
document.bgimg.src = aimages[nimg].src;
bfadein = 1;
nimg = (nimg < aimages.length-1) ? nimg + 1 : 0;
setTimeout('ffadebg();', 500);
} else if (bfadein && (nimgop < 1)) {
nimgop = nimgop + 0.05;
setTimeout('ffadebg();', 20);
} else if (bfadein && (nimgop >= 1)) {
bfadein = 0;
fadetimeout = setTimeout('ffadebg();', 5000);
}
}

function fgetcategory(ncat_id) {
document.getElementById("homediv").style.display = "none";
document.getElementById("menudiv").style.display = "block";
document.getElementById("socialdiv").style.display = "block";
document.getElementById("sidemenudiv").style.display = "block";
document.getElementById("contentdiv").style.display = "block";
document.getElementById("creditsandcounterdiv").style.display = "block";
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("contentdiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getcategory.php?c="+ncat_id, true);
xmlhttp.send();var bfadein = 0;
nimg = Math.floor(Math.random()*(aimages.length-1));
var nimgop = 1;

var fadetimeout;

document.bgimg.src = aimages[nimg].src;
nimg++;
document.getElementById('backgrounddiv').style.opacity = 1;
setTimeout('ffadebg();', 5000);
}[/JS]

De aangeroepen pagina die de array moet vullen met de juiste afbeeldings-urls:

<?php
include("dbconnect.php");
include("data1.php");
include("translations.php");

$nc = $_GET["c"];

$afiles = scandir("./backgrounds/icri");
$nbi = count($afiles);
$nbj = 0;

echo "<script language='javascript' type='text/javascript'>
";

for ($nx = 0; $nx < $nbi; $nx++) {
	if ($afiles[$nx] != "" || false) {
		$afileext = explode(".",$afiles[$nx]);
		if (strtolower($afileext[1]) == "jpg" && ($afiles != "." || "..")) {
			echo "aimages[" . $nbj ."] = new Image();
";
			echo "aimages[" . $nbj . "].src = './backgrounds/icri/" . $afiles[$nx] . "';
";
			$nbj++;
		}
	}
}

echo "</script>
<div id='backgrounddiv'>
  <center>
    <img id='backgroundimg' name='bgimg'>
  </center>
</div>";
?>

Als ik kijk in de ontwikkelingstool, dan staat de innerHTML zoals ik die het vraag.
Alleen "ziet" de functie de inhoud van de array als niet bestaande.
Ook als ik het slideshow gerelateerd javascript in de php-file zet, gebeurt er niets en krijg ik zelfs geen enkele fout te zien omdat de functie van de slideshow zelf niet eens aangeroepen wordt, terwijl deze wel duidelijk in de innerHTML staat van de contentdiv

Hoe kan ik dit oplossen.

 

[JeroenE]

Iemand die een oplossing weet om dit te doen werken?

 

[Johantrax]

1. Hoe zeker ben je dat de code om je array te vullen, die pas later (onclick) wordt opgehaald, ook door de browser wordt uitgevoerd? Kan je achteraf eens via de console je array bekijken?

2. XMLHttpRequest is asynchroon. Dat wil zeggen dat de code die net onder xmlhttp.send(); staat meteen wordt uitgevoerd; mogelijks nog voordat het antwoord binnen is. Je kan die code dan dus best ook binnen de sectie zetten waar je antwoord binnen is gekomen:[JS]function fgetcategory(ncat_id) {
document.getElementById("homediv").style.display = "none";
document.getElementById("menudiv").style.display = "block";
document.getElementById("socialdiv").style.display = "block";
document.getElementById("sidemenudiv").style.display = "block";
document.getElementById("contentdiv").style.display = "block";
document.getElementById("creditsandcounterdiv").style.display = "block";
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("contentdiv").innerHTML = xmlhttp.responseText;
//de afbeelding uit het antwoord pas gebruiken als het antwoord binnen is...
var bfadein = 0;
nimg = Math.floor(Math.random()*(aimages.length-1));
var nimgop = 1;

var fadetimeout;

document.bgimg.src = aimages[nimg].src;
nimg++;
document.getElementById('backgrounddiv').style.opacity = 1;
setTimeout('ffadebg();', 5000);
}
}
xmlhttp.open("GET", "getcategory.php?c="+ncat_id, true);
xmlhttp.send();
}[/JS]

3. Als je enkel een JavaScript variabele wil opvullen via je request, kan je misschien JSON als formaat gebruiken. Dan is je antwoord rechtstreeks bruikbaar zonder je scripttags moet aanmaken. Dit voorbeeld op w3schools kan je op weg helpen.