binding jquery ui methods after ajax calls

Question

I am using jquery ui in several places to create ui elements like tabs, tooltips etc. These all follow the same format of $('selector').ui_method_name, where the ui-method-name could be tabs, accordion, tooltip etc.

This all works fine when the page loads first and this line is called on $(document).ready, but in some cases I load content via ajax and this content needs to be formed into a ui element and in that it does not work.

What's the best way to do this binding after ajax calls, I guess I can do it on a case by case basic but I am wondering if there is a global way of doing it.

I tried the $.ajax registration but that does not seem to be working, before I bang my head anymore, I wanted to check if there is a good way.

I am using this in my rails app.

Thanks

Answer 1

You can pass a function to the ajax method's success parameter:

$(".example").ajax({
  'success': function(data) {
     something()
  }
})

I'm unsure about setting this globally but you could define the success functionality and pass it in to several calls and have it deal with data that's returned appropriately.

var hurray = function(data) {
  do_stuff(data)
}

$(".example").ajax({
  'success': hurray
})

(Or obviously just define a function normally and call it)