Apply jQuery UI widgets to ajax loaded elements

Question

I want to activate the jQueryUI button widget on a given selector, lets say \'.button\'.

Whats the best way to automatically activate the widget on any new \'.button

Answer 1

You have a few options here. First, there's the liveQuery plugin, like this:

$(.button).liveQuery(function() { $(this).button(); });

Another alternative is to call the selector on your elements when you load them, this for example finds all .button only in the response, so doesn't mess with existing elements before the ajax call:

$.ajax({
   url: 'page.html'
   success: function(data) {
     //stuff...
     $('.button', data).button();
   }
});

Another similar approach if you have a lot going on is to have your plugins in a function like this:

function rigUI(context) {
  $('.button', context).button();
  $('.date', context).datepicker();
}

$(rigUI); // Load at document.ready, default context is document

//in ajax load love above call: rigUI(data);

Answer 2

Since all jquery commands have a uniform structure it is really easy to use any object (including json data from a ajax request) as a jquery command

Sample:

var jc = {
    'selector': '#sample',
    'method': 'dialog',
    'options': {'title': 'I am a sample'}
}

$(jc.selector)[jc.method](jc.options);

is the same as

$('#sample').dialog({'title': "I am a sample}};

http://jsfiddle.net/wb5Ee/

Answer 3

An alternative to liveQuery as it seemed outdated to me as I could not make it work :

https://github.com/bapplistudio/jquery.build

• You need to declare all your jquery activations into *$("body").build(function(){ }); * statements
• You need to call $("newelement").build(); to call back all your initialisation functions.

Look at the documentation on the jquery.build site for more information and examples and the live demo similar to your case.

http://saf.re/github/jquery.build/examples/simple.html