jQuery UI inside ajax div

Question

i have a site with links that look like this: onClick = ajax('link.html','contentdiv')

but i want to use jquery ui tabs inside the contentdiv, i tried even to put all the code inside the html but nothing, i tried:

$(document).ready(function() {
$("#tabs").tabs({});

and also:

$((function() {

what should i put in the index.html and the link.html to make it work? the #tabs div is inside the link.html

thanks

Answer 1

you dont have to do that anymore.. just simply use live method, which they created in new release, it will work on new div also

$('.newDiv').live('click', contendDiv);

EDITED: if you adding tabs inside ajax content after click, then do following

$('.newDiv').live('click', function () {
      // following can be ajax content or static content
      var content_div = '<div>...<div id="tab"></div..</div>';

      var selector = $(content_div);
      $(selector).find('#tab').tab({});
      return $(selector).html(); // add this in your final html content, it will have tabs ready.
});

Answer 2

It sounds to me like your trying to initialize the tabs before they are available. $(document).ready() from index.html will happen far before the user clicks the link and starts the ajax.

Try using something along these lines to make the tabify method wait until the html is available.

onclick = ajax({
             url:     'link.html',
             success: function (html) {
                          $('#contentdiv').append(html);
                          $('#tabs, #contentdiv').tabs();
             }
          });