Using Jquery $.get within document ready

Question

Could someone explain why the alert statement would return nothing when used in this context:

$(document).ready(function(){

    $.get("/getsomedata.php", function(data){
        $("#mydiv").append(data)     
      });

     alert($("#mydiv").html()); //outputs nothing

});

When this statement returns what you would expect:

$(document).ready(function(){

     $("#mydiv").append('some info')     
      alert($("#mydiv").html()); //outputs 'someinfo'

});

Answer 1

the .get isn't blocking, the rest of your script continues to run while the document loads. To get it to work as you expect, put the alert inside the anonymous function you are providing. This is a callback function and will fire after the document is loaded. ie:

$(document).ready(function(){

$.get("/getsomedata.php", function(data){
    $("#mydiv").append(data);
    alert($("#mydiv").html()); // This won't fire til somedata.php is loaded
  });

});

Answer 2

The data is not back yet from the asynchronous call. function(data){$("#mydiv").append(data)} is the callback function, and executes when the data comes back. Nothing waits for that. That function will happen when the data comes back, but this will almost certainly be some milliseconds after 'alert' call has happened.

For any functionality dependent on that data coming back, have that functionality happen in the callback function itself. This way it will wait for the data to come back, but will happen as soon as possible.

Something like:

$(document).ready(function(){

    $.get("/getsomedata.php", function(data){
        $("#mydiv").append(data);
        alert($("#mydiv").html()); // will show your data     
      });
});

Answer 3

AJAX calls are asynchronous (by default), which means that your alert is called before the AJAX request completes (or your callback is executed) and the element which's html you are trying to alert is empty at that moment.

If you want to solve your problem just put the code that deals with the HTML of that DIV inside your callback function that you have in your $.get()

Answer 4

AJAX is asynchronous, meaning that the append is happening AFTER the alert. The function passed to $.get() is a "callback" as in - gets called at a later time when the operation has finished. Any manipulation of the data you receive should be handled in the callback:

$(document).ready(function(){
  $.get("/getsomedata.php", function(data){
    // this is a "callback"
    $("#mydiv").append(data)     
    alert($("#mydiv").html());
  });
});

Answer 5

You call get method and this is a function that calls the XMLHttpRequest asynchronously -

Answer 6

$(document).ready(function(){

$.get("/getsomedata.php", function(data){
    $("#mydiv").append(data)     
    alert($("#mydiv").html()); //outputs nothing
});


});

Write it like this. Otherwise like your example the html is alerted before the GET request is done.

Answer 7

That's because the the alert is called first, and the callback that fill the div is finished later, and ocours asynchronously