CODEWITHSUNDEEP
jqueryajaxasynchronoussynchronous
Bigandrewgold
Bigandrewgold

Reputation: 1

Running one thing after another in jquery

I have this code snippet from something i am developing

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#Submit").click(function(){
        var Count = document.frmOne.count.value
        for (i=1;i<=Count;i++)
        {
            $.ajax({
                url:"process.php",
                type:"get",
                data:$("form").serialize(),
                success:function(response){
                    var obj = jQuery.parseJSON( response );
                    var success = obj.success;
                    var actionsNumber = obj.number;
                    $("#result").html('There have been  '+actionsNumber+'  loops completed');    


                }
            })
        }
                $.ajax({
                     url:"done.php",
                     type:"get",
                      })
        })
    })
</script>

and basically I need to have the whole for loop complete then have it run "done.php". But currently it seems to run done.php after about 2 loops in the for loop.

So lets see if i can explain this better. I have this whole js script run after someone clicks a submit button. I have it run process.php for a user inputted amount of times, then i want it to run done.php after it finishes the for loop. But it is currently running process.php about twice, then done.php, then continues with process.php.

How can i fix this?

Now i have tried this and it is not working still, any help please

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#Submit").click(function(){
        var Count = document.frmOne.count.value
        var b = 0
        for (i=1;i<=Count;i++)
        {
            $.ajax({
                url:"process.php",
                type:"get",
                data:$("form").serialize(),
                success:function(response){
                    var obj = jQuery.parseJSON( response );
                    var success = obj.success;
                    var actionsNumber = obj.number;
                    $("#result").html('There have been  '+actionsNumber+'  loops completed');   
                    b++;


                }

            })
    if(Count == b)
            {
                $.ajax({
                    url:"done.php",
                    type:"get",

                      })
                      var b = 0
            }
        }



        })
    })
</script>

Upvotes: 0

Views: 1678

Answers (3)

Jishnu A P
Jishnu A P

Reputation: 14382

In your the looped ajax request success callback add the logic to check if it's the last ajax request callback if yes. Call the done.php call.

for(var i;i<=Count;i++)    
    $.ajax({
    ...
    ,success:function(data){
       if(Count == i)
       {
          $.ajax({
          ..
          url:"done.php",
          ..
          });
       }

    },
    ..
    });
}

Upvotes: 0

James Chen
James Chen

Reputation: 10874

Keep another count, increase that count in the first ajax call's success callback (inside the loop). Then call the second ajax call to done.php only when that count reaches Count.

$.ajax is asynchronous and so in your code it won't wait for all the calls inside the loop to finish before going to the done.php call. That's how AJAX works.

Upvotes: 0

Sam Dufel
Sam Dufel

Reputation: 17598

Short answer - you need to set the option async: false in the ajax requests inside your for loop.

Longer answer - Your success function which prints out the number of loops only executes when the requests make it back to you, not when they're sent. Your loop actually finishes before the request to done.php is sent, but you can't control the order that your requests come back in. You can verify this by moving this line:
$("#result").html('There have been '+actionsNumber+' loops completed');
to right before the ajax request in the loop.

Upvotes: 1

Related Questions