Question

I tried for several hours to get the following code working.
The code should be paused until the page is loaded. The problem that I’m encountering is that the AJAX is executing asynchronously. How would I force the code to wait before executing?

var i = 1;
function On_Success(){

    i = i+1;
    if(i<=10){

    $('<div id="p'+i+'">b</div>').replaceAll('#b'); 
    $('#p'+i).load('tabelle.html');
    //here shoul be waited, til the page is loaded
    On_Success();
    };
    };

    function knopf(){
    $('body').append('<div id="p'+i+'">a</div>');
    $('#p'+i).load('tabelle.html'); 
    On_Success();
    };

Answer 1

.load accepts a callback that runs when loading is complete; you can use this instead of the more verbose jQuery.ajax function, which will require you to write additional code to populate your element.

jQuery("#p", i).load("tabelle.html", function() {   
   //code to run when tabelle.html has finished loading
});

Change your code to the following. It should work:

var i = 1;

function On_Success() {

    i = i + 1;
    if (i <= 10) {
        $('<div id="p' + i + '">b</div>').replaceAll('#b');
        $('#p' + i).load('tabelle.html', On_Success);        
    };
};

function knopf() {
    $('body').append('<div id="p' + i + '">a</div>');
    $('#p' + i).load('tabelle.html', On_Success);
};

On another note, is it absolutely necessary that you should wait for one load to complete before populating the other divs? Why can’t you do something like this:

function On_Success() {
    var i = 0;
    while(i < 11) {
        $('<div id="p' + i + '">b</div>').replaceAll('#b');
        $('#p' + i).load('tabelle.html');        
    };
};

Also, I’m not sure what the knopf function is doing. What should the value of i be in that function? How are you calling your code?