Using JQuery load


#1

I am working on Jquery and Ajax assignment
In this example there are two URLs to be loaded from:

/codecademy/loadgreendiv - will return a single div which is green in colour.

and

/codecademy/loaddiv - which will return a number of divs with different IDs. The div which you want to select from this set of divs is the one with the ID pickMe.

Both divs should be loaded below the Load HTML button.

You also must hide the div showing the loading status in the complete callback of each load command.

$(function() {
$("#loadHTML").click(function() {
$("#htmlcontainer").empty(); // Remove any existing HTML previously loaded

   $("#loadStatus").show();
   
   $("#container1").load("/codecademy/loadgreendiv", function(data, textStatus, jqXHR) 
   {
        // complete
             $(this).append(data + textStatus);
             $("#loadStatus").hide();
   });
    
   $("#container2").load("/codecademy/loaddiv #pickMe");
        function(data, textStatus, jqXHR) {
        // complete
        $(this).append(data);
        $("#loadStatus").hide();
   });

});
});

this is giving an error: SyntaxError: function statement requires a name


How to increment pages on scroll when extracting data from JSON?
#2

http://api.jquery.com/load/

Follow this example in the next handler.


#3

In the first load you forgot to give the div id

If you check the jQuery Load method then it should be like this:

.$("#container1").load("/codecademy/loadgreendiv #mydivId", function(data, textStatus, jqXHR) 
   {
        // complete
             $(this).append(data + textStatus);
             $("#loadStatus").hide();
   });

For checking the syntax error use Developer tools of chrome - shortcut CTRL+SHIFT+I