while loop with ajax call not working in javascript

Question

Im trying to do a basic while loop in javascritp, but I'm getting the wheel icon in os x everytime I launch my script. This code is executed when I press an html button:

    <script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        myFunction();
        });
});
    var num=1;
function myFunction() {

    var c = 0;
    // Find a <table> element with id="myTable":
    var table = document.getElementById("myTable");
    // Create an empty <tr> element and add it to the 1st position of the table:
    var row = table.insertRow(-1);
    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

while(num != 5)
{
    $.ajax({
            type: 'get',
            url: 'controller/script.php',
            type: "POST",
            data: (
            {
                name: 'Alfro',
                surname: 'McDohl',
                num: num
            }),
            success: function(data) 
            {                
                $("p.polla").text(data);
                var result = $.parseJSON(data);
                // Add some text to the new cells:
                cell1.innerHTML = result[0];
                cell2.innerHTML = result[1];
                num = result[2];
            },
            error: function()
            {
                alert('error');
            },
        });
    }           
}

And this is the php code of script.php:

<?php

$name = $_POST['name'];  
$surName = $_POST['surname'];
$num=$_POST['num'];
$num++;
if ($_POST['num']>=10){
    echo json_encode(array($name.$c++, $surName.$c++,'0'));
}
else{
    echo json_encode(array($name.$c++, $surName.$c++,$num));
}
?>

The meaning of this is because I want to load data from a database, but it takes too much time to retrieve all the info, so I want to show one result with an ajax call and then continue to retrieve the database to show another result, "one per one" and for this I need to work with a while loop, so I'm playing with this while loop, but I can't get it work.

prograhammer · Accepted Answer · 2015-10-18 16:03:19Z

2

Don't use a while loop. Your Ajax call is happening asynchronously so that the while loop never gets the value of n changed. So remove the loop and just put the condition in your Ajax success block and simply call myFunction(num) again from there.

success: function(data) 
            {                
                $("p.polla").text(data);
                var result = $.parseJSON(data);
                // Add some text to the new cells:
                cell1.innerHTML = result[0];
                cell2.innerHTML = result[1];
                num = result[2];
                myFunction(num);
            },

answered Oct 18, 2015 at 16:03

prograhammer

20.7k13 gold badges95 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alfro Over a year ago

I need to wait 5 more minutes to accept your answer but it has fixed my problem, many thanks !

Collectives™ on Stack Overflow

while loop with ajax call not working in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related