Search code examples
javascriptjqueryunobtrusive-javascript

Execute unobtrusive Javascript after Ajax call

I want to use John Resig's pretty date for replacing my ugly time stamps with some nice-to-read time specification. So I thought about using the following unobtrusive html markup:

 <span data-type="prettyDate">25.04.2012 10:16:37</span>

Acording to that I use following Javascript/jQuery to prettify the date:

 $(function() {
    $('[data-type="prettyDate"]').prettyDate();
 }

My problem is that I don't know how to deal with markup that is loaded using ajax because that would not be caught since it does not yet exist when the DOM ready event fires. Reacting to events on "ajaxed" elements is pretty easy using the on handler. But this is not an event.

Solution

  • You have to call .prettyDate() after each Ajax response is added to the DOM. A simple way to do that is to set a global complete handler with ajaxComplete.