CODEWITHSUNDEEP
jquery
user855
user855

Reputation: 19938

$("body").ready() works but $("body").load() does not work?

Why? I'm having the same issue with the image Tag.

ready() callback gets invoked. load() callback never gets invoked.

Browser: Firefox3.6.8 on Mac

Edit:

I somehow get the feeling that I am using load() incorrectly in JQuery. Documentation I am referring to:- http://api.jquery.com/load-event/

I am doing

$("body").load(function() { // do something });

Isn't this right? I see some code doing:- $("#id").load("./newpage.html"); But these 2 are different APIs right?

Edit 2

Some more code to explain my whole issue here:-

var tagString = "<img id='"+imageId+"'></img>";
this.divElem.append(tagString);
var imgElems = $("#"+imageId);

var vowels = this;
imgElems.each(function (index) {
    $(this).attr('id',imgId).attr('src',imageUrl)
               .attr('width',1).attr('height',1);       
        $(this).load(function() { 
           // do something.
           // This Damned! function is never getting called!
        });

});

Works

 $().ready(function() {
    $().load(function() {
       /// something. this worked!
    });
 });

Does not work

    // without the ready() wrapper does not work
    $().load(function() {
       /// something. this worked!
    });

Why? I am happy it works. But I don't understand why!

-Ajay

Upvotes: 4

Views: 32878

Answers (3)

nosh
nosh

Reputation: 600

.ready() and .load() are completely different.

$("body").ready(onBodyLoaded);

refer https://api.jquery.com/ready/

This line tells the browser call the function onBodyLoaded when the body has been loaded.

var url = some url
var data = {}
$("body").load( url , data, onComplete(responseText, textStatus, XMLHttpRequest) )

This tells the browser to request the url, passing data if POST, into the body, and then call the onComplete function.

refer https://api.jquery.com/load/

Upvotes: 2

Guffa
Guffa

Reputation: 700650

As in the example on the page that you linked to, use:

$(window).load(function(){
  // do something
});

It might be possible to bind the event to the body element like you tried, but then you have to place the code for doing that inside the body element. If you put the script in the head (where script preferrably goes), the body element does't exist yet when the code runs.

Upvotes: 8

Nick Craver
Nick Craver

Reputation: 630559

Technically, $("anything").ready() works...it doesn't even look at the selector, though an erroneous selector will error there. With .load() it's an event handler, so you need to make sure you aren't binding after the event has fired, or you're listening for an event that already happened.

Upvotes: 3

Related Questions