0

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. :)

Ivaldir
  • 185
  • 12
  • Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – Ted Hopp Feb 07 '16 at 20:47
  • 2
    Creating requests within a loop is generally poor practice, as it creates a significant burden on both your client and your server. I suggest optimizing `test1.php` such that you can get all the info you need from a single request (rather than a series). Perhaps load **all** the colors into your client with a single request, then loop through as needed without further ajax. – wbadart Feb 07 '16 at 20:49
  • You're trying to conduct memory intensive operations within the browser. If the browser doesn't crash, the security system of the OS will block you, if that doesn't happen, your server will block you as they might interpret that as a DDOS attach. Generally a bad idea. Don't put communications inside a loop without anything to hold the loop in every iteration. This thing would crash an entire operating system, let alone an internet browser. Plus, you're not really clearing the memory. Hold arguments in an array and then send them collectively once in a while. – Pouria Feb 07 '16 at 20:49

0 Answers0