ansaurus

Question

How to use jQuery's load(fn) method so it actually works

Answer 1

A:

it may be firing before the DOM is ready, thus the #test div does not exist yet, try wrapping it in $(document).ready(...

should look something like:

$(document).ready(function(){
    $('#test').load(function(event) { event.target.css('color', 'blue'); alert('a');});
};)

Russ Bradberry 2009-07-30 18:24:53

Answer 2

A:

Only windows and images fire the load event, from what I can see.

$(function(){
  $("#test").css("color","blue");
});

Jonathan Sampson 2009-07-30 18:25:56

Still nothing happens.

Olek 2009-07-30 18:28:58

In this case, the load method isn't necessary from what I can tell.

Jonathan Sampson 2009-07-30 18:44:23

Answer 3

+4 A:

The load event was intended for elements that are loaded asynchronously, like images and ajax-loaded content.

It's useless for static content.

In your example, the first load() event handler is bound before the #test element is defined, so it won't work. The second load() event handler is too late, because #test is already loaded.

Philippe Leybaert 2009-07-30 18:27:02

right-o. if you need to modify something when it loads, through it in `$(document).ready(...)`

geowa4 2009-07-30 18:31:04

So is there any other way to force appearing static dom element and its dynamically created content simultaneously? I'am trying to avoid situation when after reloading the page user sees the static dom element with no content in it and it must take some time (like second or so) before this element is filled with result of javascript function.Of course I can create this initial content on the server side, but I was hoping this could be done purely in js.

Olek 2009-07-30 18:46:08

Answer 4

A:

If I understand your intentions correctly, the code you are intending to write is:

$(function() {
  $('#test').css('color', 'blue');
  alert('a');
});

If you would also like the #test element to perform a certain function when it's content is loaded via an AJAX call, try this:

$(function() {
  $('#test').css('color', 'blue').load(function() {
    $('#test').css('color', 'red');
    alert('b');
  });
  alert('a');
});

Marve 2009-07-30 18:47:11

Actually, I was trying to do something different and in the way that now seems strange to me. Not to mention it doesn't work. :) I explained it under Philippe Leybaert's answer.

Olek 2009-07-30 18:54:56

@Olek Thanks for the clarification. I understand the issue with the delay in loading the content. You have almost certainly thought of this already, but perhaps a "loading" dialog or indicator would suffice?

Marve 2009-07-30 19:35:07

ansaurus

tags:

views:

answers:

How to use jQuery's load(fn) method so it actually works

related questions