I have some troubles using ajax within a loop. The loop and ajax work fine on their own, but combining them the trouble starts.
Below is a test script I wrote to see if the script works before I make the rest. The idea is that java script gets $numbers from the database and performs a loop for the amount it got (so in the example 7 times).
Each time ajax has to send the $numbers to php to search in the database for a %color corresponding with the value of $numbers, but since this is a test I just took "check" instead. This is then used to target a specific div which corresponds to the value of $numbers en $color (in this case $number and check).
At the moment I've tested a while loop and ajax separately and they work perfect, but combining them is where it goes wrong. The while ajax script will do nothing but freeze the browser.
I've also tried a for loop but this does nothing except giving me a Uncaught TypeError: Cannot set property 'innerHTML' of undefined.
This is the test script.
<?php
$number = 7;
?><?php
if(isset($_POST["number"])){
echo 'Check';
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="../Scripts/main.js"></script>
<script>
function testwhile() {
var number = <?php echo $number ?>;
while (number > 0) {
var x = document.getElementsByClassName(number);
x[0].innerHTML = "Check!";
var number = number - 1;
}
}
function testajax() {
var number = <?php echo $number ?>;
var colour = "check";
var ajax = ajaxObj("POST", "test1.php");
ajax.onreadystatechange = function () {
if (ajaxReturn(ajax) == true) {
var colour = ajax.responseText;
var x = document.getElementsByClassName(colour + ' ' + number);
x[0].innerHTML = "Check!";
}
}
ajax.send("number=" + number);
}
function testwhileajax(){
var number = <?php echo $number ?>;
while (number > 0) {
var colour = "check";
var ajax = ajaxObj("POST", "test1.php");
ajax.onreadystatechange = function () {
if (ajaxReturn(ajax) == true) {
var colour = ajax.responseText;
var x = document.getElementsByClassName(colour + ' ' + number);
x[0].innerHTML = "Check!";
var numbers = numbers - 1;
}
}
ajax.send("number=" + number);
}
}
function testloopajax(){
for (number = <?php echo $number ?>; number > 0; number--){
//var number = number;
var colour = "check";
var ajax = ajaxObj("POST", "test1.php");
ajax.onreadystatechange = function () {
if (ajaxReturn(ajax) == true) {
var colour = ajax.responseText;
var x = document.getElementsByClassName(colour + ' ' + number);
x[0].innerHTML = "Check!";
}
}
ajax.send("number=" + number);
}
}
</script>
</head>
<body>
<div onclick="testajax()">Check ajax!</div>
<div onclick="testwhile()">Check while!</div>
<div onclick="testwhileajax()">Check both!</div>
<div onclick="testloopajax()">Check loop!</div>
<div class="1 Check">Check?</div>
<div class="2 Check">Check?</div>
<div class="3 Check">Check?</div>
<div class="4 Check">Check?</div>
<div class="5 Check">Check?</div>
<div class="6 Check">Check?</div>
<div class="7 Check">Check?</div>
</body>
</html>
Any help is much appreciated. :)
