CODEWITHSUNDEEP
jqueryruby-on-railsjquery-ui
rangalo
rangalo

Reputation: 5606

jQueryUi tabs loaded dynamically in jQueryUi dialog don't work

I am having a Ruby and Rails application.

I am loading a form using Ajax. The form is an existing rails view. The form in turn contains jQueryUi tabs.

Unfortunately the tabs are not shown when the form is loaded in the jQuery dialog box.

Here is the code for the dialogbox

  $('#create_candidate').click( function(e) {
    var url = $(this).attr('href').replace('?','.js?');
    var new_candidate_dlg  = $('<div id="new_candidate_dlg">Loading form ...</div>');

    new_candidate_dlg.load(url);

    new_candidate_dlg.dialog({
      autoOpen:false,
      width: 'auto',
      height: 'auto',
      modal: true,
      close: function() {
        $('new_candidate_dlg').remove();
      },
      open: function() {
        $('#tabs').tabs();
      }
    });
    new_candidate_dlg.dialog('open');
    e.preventDefault();
  });

Strangely, If I change the code like following, the tabs do appear but only when I click on the tabs. 

  $('#create_candidate').click( function(e) {
    var url = $(this).attr('href').replace('?','.js?');
    var new_candidate_dlg  = $('<div id="new_candidate_dlg">Loading form ...</div>');

    new_candidate_dlg.load(url);

    new_candidate_dlg.dialog({
      autoOpen:false,
      width: 'auto',
      height: 'auto',
      modal: true,
      close: function() {
        $('new_candidate_dlg').remove();
      },
      open: function() {
        $('#tabs').live('click', function (){
          $(this).tabs()
        });
      }
    });
    new_candidate_dlg.dialog('open');
    e.preventDefault();
  });

Upvotes: 0

Views: 740

Answers (2)

dyelawn
dyelawn

Reputation: 760

I'm new at coding but I'll give it a shot. You're either missing something in your close function to identify the element (# for id attr), or you're misstating the variable you've previously declared.

Also, I think your .dialog() call should be separate from your .click() event handler, i.e. earlier in your script.

I normally see e.preventDefault(); at the top of event functions. Your call to the open method should be in double quotes.

Your second example is working when you click the tabs because it's firing the .tabs() method as a click event handler. (live() is deprecated if you're using jQuery newer than 1.7)

Can you post the html in your dialog? It'd help me try to provide a better answer.

Upvotes: 0

mu is too short
mu is too short

Reputation: 434745

You have a timing problem. The execution order is probably going something like this:

  1. new_candidate_dlg.load(url)
  2. new_candidate_dlg.dialog(...).
  3. new_candidate_dlg.dialog('open').
  4. The .load(url) finishes and loads the HTML into the new_candidate_dlg.

So when the dialog's open callback executes, there is no #tabs element available and the $('#tabs').tabs() call does nothing. You want to bind the tabs after load has loaded the HTML and load has a callback that you can use for just that purpose:

new_candidate_dlg.load(url, function() { $('#tabs').tabs() });

and then remove the open callback from your new_candidate_dlg.dialog({ ... }) call.

This callback works:

open: function() {
  $('#tabs').live('click', function () {
    $(this).tabs()
  });
}

because you're using live for the click event (so #tabs doesn't have to exist when you call $('#tabs').live()) and you won't be clicking anything until it is on the page and ready to go.

Upvotes: 1

Related Questions