Jquery ajax call php page that contain ajax calls

Question

I 've got 2 pages

1)index.php

2)feedy.php

1)In index.php i have this code:

   $.ajax({        type: 'GET', 

            url: 'feedy.php?n=<?echo $nnn?>',  
            data: { get_param: 'value' }, 
            success: function (data) { 
                                 var names = data


                $('#content').html(data);           
            }
        });

2)In feddy.php i have this code:

for (i=0;i<=10-1;i++){

$.ajaxSetup({async: false});
 $.post( 
             'addme.php',
             { txt: con, lnk:ln,addr:'".$addr."' },
             function(data) {
                $('#stage').html(data);

             }

}

As you can see i have on page calling another page that makes 10 calls of another page.

The problem: index.php calls feedy.php BUT it only waits to get the php output and not the ouput of the javascript code . Can i make it wait so that in feedy.php all calls can be done ?

Another solution i think could work is to find a way to send a signal to index.php that feedy has finished making calls .

Please help me beacause i can't find a solution :(

Answer 1

AJAX is asynchronous, meaning that it doesn't stop the flow of execution.

When you do your AJAX call in index.php, it won't wait for the results from feedy.php because it's making an asynchronous call.

You'll have to rethink the way that feedy.php is returning data, making sure that it's doing it in a synchronous manner. An example of this would be directly echoing the data you need to the page, rather than wrapping it in an asynchronous function call.

Answer 2

inside of the For loop in feddy.php, have it return a completed value to index.php, so it doesn't return until the loop is done. Or more appropriately, so that the javascript doesn't continue on index.php until the loop is done.

for (i=0;i<=10-1;i++){

    $.ajaxSetup({async: false});
    $.post( 
             'addme.php',
             { txt: con, lnk:ln,addr:'".$addr."' },
             function(data) {
                $('#stage').html(data);

             }

    if(i = 8) { //right before the i++ for the last execution
        return 'positive value';
    }
}

and then for index, add an if statement to your success

 $.ajax({        type: 'GET', 

        url: 'feedy.php?n=<?echo $nnn?>',  
        data: { get_param: 'value' }, 
        success: function (data) { 
            if(response=='positive value') {
               var names = data


              $('#content').html(data);           
           }
        }
    });

Answer 3

You could put the JavaScript code from feddy.php into a function in index.php and call that function after your initial ajax call.

Some function like this that does everything you need to do with feddy.php...

function doFeddyCalls()
{
    for (i=0;i<=10-1;i++){
        $.ajaxSetup({async: false});
        $.post(
            'addme.php',
            { txt: con, lnk:ln, addr:'".$addr."' },
            function(data) {
                $('#stage').html(data);
        });
    }
}

And then when you make your ajax call to feddy.php, do something like this.

$.ajax({
    type: 'GET', 
    url: 'feedy.php?n=<?echo $nnn?>',  
    data: { get_param: 'value' }, 
    success: function (data)
    { 
        var names = data
        $('#content').html(data);
        doFeddyCalls();  //Ajax on feddy.php     
    }
});

Once you've used the ajax function to load feddy.php into index.php the JavaScript can act on the loaded elements.

EDIT: Since you don't want the user to see them loading, you could hide the element using $('#content').hide() or show a loading panel in the mean time. This answer describes how to do a single callback for multiple Ajax calls, which you could use to show the element once loading is complete.