ansaurus

Question

document.ready() analog for $(html)/$.ajax

Answer 1

+2 A:

If it is an option for you, you can include a $(document).ready() statement in the returned html. The function passed there will be called after the returned html is rendered.

Jan Willem B 2009-10-19 20:00:18

I will need to get a reference to the loaded part from there. If I do $(document).ready(function(){$("*").css('background-color', 'red');}); in the loaded part, WHOLE page will become red instead of just loaded div.

queen3 2009-10-19 20:09:10

yes. i solved that by adding a class to the elements and filtering when doing it again: $('*').not('.doneAlready').css(...).addClass('doneAlready');

Jan Willem B 2009-10-19 20:13:07

Good approach and will work, +1. I wonder if tracking it in global array is better - I'm actually concerned about big pages and adding class to every single element... seems like a hack. So I'll hope for cleaner approaches. But if none I think I'll have to accept this solution.

queen3 2009-10-19 20:20:49

ok. i did not have a situation where i had to "css" all elements, so i don't know if this will impact performance (but i guess so).

Jan Willem B 2009-10-19 20:27:50

Answer 2

+2 A:

What you are probably looking for are the W3C mutation events, such as DOMNodeInserted and DOMNodeRemoved Unfortunately, they are not supported by all browsers (the IE family of browsers do not support them at all), so we need to look at other ways of achieving cross-browser functionality.

The way that live() works is to use event delegation and it is possible that you could implement event delegation in your own code. As an example,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
<title>Demo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(function() {
    $('.picker').datepicker();

    $('button').click(function() {
      $(this).prev().before('<br/><input type="text" class="picker" />');
    });

    $('div.container').click(function(e) { 
      var target = $(e.target);    
      if (target.hasClass('picker') && !target.hasClass('hasDatepicker')) { 
     $(e.target).datepicker().datepicker('show'); 
      }
    });
});
</script>
</head>
<body>
<div class="container">
<input type="text" class="picker" />
<br/>
<button>Add a new input</button>
</div>
</body>
</html>

Here we check the event.target on the container <div> to see if it has the class picker and not the class hasDatepicker (which is added by the datepicker plugin to indicate an input with a datepicker attached). If the event.target meets the criteria, we bind a datepicker to it and then call datepicker('show') on it. If the event.target already has a datepicker attached then clicking on the input will show the datepicker and if event.target does not have picker class or no datepicker attached, then nothing will happen.

I chose datepicker as you mentioned it in your question, but the idea of event delegation can be applied in many different circumstances, however, not all events bubble.

Russ Cam 2009-10-19 20:39:34

Great writeup! If you are in need of event delegation on events that don't bubble, you could use livequery - http://docs.jquery.com/Plugins/livequery - It has worse performance than the jquery $.live style event delegation, but it can catch the events that don't bubble. Cheers.

Alex Sexton 2009-10-19 21:24:55

Not sure how events can help me - what is the event for html()/append()? Well, except for those that I can't use because the users still work with IE6...

queen3 2009-10-20 07:58:44

Answer 3

A:

You can create a routine that performs the plugin initialization scoped to a particular root jQuery object. Something like this:

function AttachPlugins(jq) {
  jq.Find('.date').datepicker();
  // other stuff
}

Your document ready handler can call it like:

$(document).ready(function(){
  AttachPlugins($(body));
});

While your Ajax handler can call it like this

var newElement = $(html);
AttachPlugins(newEleemnt);

It's not totally automated, but it shouldn't be. The Ajax HTML should be considered "fresh" and unprocessed. Automatically attaching plugins would make me convulse the way SQL triggers do. At least with my approach you reuse the same code that is used to attach the plugins on ready.

gWiz 2009-10-19 23:06:16

As I said, this is what I do now: "I do success(data) { item = $(data); initDatePickerEtc(item); }."

queen3 2009-10-20 06:33:10

My answer is different. My answer specifies that you call the same function from ready and from the Ajax callback. You did not say that you call initDatePickerEtc from you ready handler, nor does initDatePickerEtc appear to take a jq argument to scope the operation.

gWiz 2009-10-20 06:49:47

ansaurus

tags:

views:

answers:

document.ready() analog for $(html)/$.ajax

related questions