Question

Hi guys i have the following code

$.ajax({
url: "http://localhost/twee/chat/getnumcom",
type: 'POST',
data: form_data,
success: function(html) {
            var data = parseInt(html);
                page = 20 * data ;

                while ( counter < page ) {

                       $.get("http://localhost/twee/chat/"+id+"/"+counter,function(data){
                       $('#c').append($(data).find('#c').html());
                       });      
                  counter = counter + 20 ;
               } 
          }
});

alert($('#600').length);
$.scrollTo('#600');

This is what it does. Originitally it appends data to my window until #600 is found. Technically i have a function which mathematically calculates where 600 should be. This is fine and the div is loaded nicely.

Howvever i added the alert specifically to check if the div is loaded. A value of 0 means no and a value of 1 means yes. In my firebug console, when the function is fired up, the while loop is still executing but the alert already displays a value of 0. Consequently, the scrolling is not done.

If i fire up the function again immediately after it has been executed, i get a 1 which means the div has been loaded.

Is there a way to delay the scroll function until the while loop has executed? I always thought the code would be executed procedurally and the alert would be displayed after all the data has been loaded.

I guess a timer would be an option but i don’t want to use that. I am not really sure how much milliseconds i should set the timer to.

Answer 1

Ajax calls are asynchronous, put your scrollTo/alert inside the success callback function, after the while loop:

$.ajax({
    url: "http://localhost/twee/chat/getnumcom",
    type: 'POST',
    data: form_data,
    success: function (html) {
        var data = parseInt(html);
        page = 20 * data;

        while (counter < page) {
            $.get("http://localhost/twee/chat/" + id + "/" + counter, function (data) {
                $('#c').append($(data).find('#c').html());
                if ($('#600').length)   //if there's a #600 element inside this $.get callback
                    $.scrollTo('#600'); //scrolls to it
            });
            counter = counter + 20;
        }
    }
});

Note that numerical IDs are valid only in HTML5, if that’s of concern.