Do while javascript issue

Question

I'm trying to send multiple post within a do while loop but the result is not added

<script type="text/javascript">
function action() {
    var initval = 1;
    var endval = 5;
    do {
    var action_string = 'txtuser=someone';

    $.ajax({
                    type: "POST",
                    url: "http://localhost/js.php",
                    data: action_string,
                    success: function(result){
                       $('div#append_result').append(initval + ',<br/>');
                     }  
                });
    initval++;
     } while (initval <= endval);
  }
</script>

The Output is: 5, 5, 5, 5, 5,

and I need the output to be: 1, 2, 3, 4, 5,

Answer 1

Due to the async nature of AJAX, by the time your success function runs for any of the resulting AJAX requests, the loop has completed and initval is set to 5. You need to capture the state of initval at the start of each request and use that captured state in the success() method. Closing over the value is the simplest way to do it:

function action() {
    var initval = 1;
    var endval = 5;
    do {
        var action_string = 'txtuser=someone';

        ( function( captured_initval ){
            $.ajax({
                type: "POST",
                url: "http://localhost/js.php",
                data: action_string,
                success: function(result){
                    $('div#append_result').append(captured_initval + ',<br/>');
                }  
            });
        }( initval ) );

        initval++;
    } while (initval <= endval);
}

Understand, though, that one or more requests could get hung up at the server allowing a latter request to complete first, which could result in 1, 2, 5, 3, 4 or something like that.

Also, using an element's ID is much faster than prefixing the hash selector with the elements tag name. Plus you should avoid re-querying the DOM for your result DIV every time the success runs. Grab it once and use it when needed:

function action() {
    var initval = 1;
    var endval = 5;
    do {
        var action_string = 'txtuser=someone',
            $AppendResult = $('#append_result');

        ( function( captured_initval ){
            $.ajax({
                type: "POST",
                url: "http://localhost/js.php",
                data: action_string,
                success: function(result){
                    $AppendResult.append(captured_initval + ',<br/>');
                }  
            });
        }( initval ) );

        initval++;
    } while (initval <= endval);
}

Answer 2

The Ajax request is asynchronous, which means by the time the success handler returns, the loop is already completed. Instead, you can create a closure to preserve the value:

success: (function(i){
    return function() {
         $('div#append_result').append(i + ',<br/>');
    }
})(initval)

Answer 3

This is because of the async behavior of ajax: Here is a modified version:

var initval = 1;
var endval = 5;
function action(){
    var action_string = 'txtuser=someone';
    $.ajax({
        type: "POST",
        url: "http://localhost/js.php",
        data: action_string,
        success: function(result){
           $('div#append_result').append(initval + ',<br/>');
           initval++;
           if(initval<=endval)
            action();
        }  
    });
 }

This is now somewhat a sequential approach. Note: I assumed every ajax request returns success, if there is an error, you should handle them on the error callback.