dialog in tab not refreshing

dialog in tab not refreshing

OK.  I have an admin interface that uses tabs.  I have some modal forms in the tabs.  This is all good while everything is static.

I then made the tabs content load using ajax.  This is also fine and works well.  Everything is going swimmingly.

Here's the problem.

The modal forms get content from the database.  So, on tab 0 my form uses information that can be edited on tab 1.

When I go to tab1 and edit the info, then return to tab 0 I can see that the dialog is the original dialog.  Firebug shows me that a modified form was returned to the browser.

If I destroy the dialog when I go to tab 1 then I can never get it back again.

Here's the code to initialise the tabs.  I've turned off all the caching I know about.

  1. $(function() {
  2.     $("#adminTabs").tabs({
  3.         cache: false,
  4.         ajaxOptions: {cache:false},
  5.         load:function(){
  6.             initTabs();
  7.         }
  8.     });
  9. });

Now I initialise the correct javascript for the relevant tab... addin click handlers etc...
 
  1.  function initTabs(){
  2.     var selected = $('#adminTabs').tabs('option', 'selected');
  3.     switch (selected){
  4.         case 1:
  5.             $('#campaignScheduler').dialog('destroy');
  6.             initDefintion();
  7.             break;
  8.            
            default:
  9.             initCampaign();
  10.     }
  11. }
And the cut down (you don't need everything!!) code for initialising my dialog...

  1. function initCampaign(){
  2.     $('input:button','#campaignButtons, #newCampaignButtons').button();
  3.     $('#campaignScheduler').dialog({autoOpen: false, modal:true});
  4.     $('#newCampaign').click(function(){
  5.         // Clear all the form elements
  6.         $('#campaignName').val(null);
  7.         $('#campaignDescription').val(null);
  8.         // Open the dialog
            $('#campaignScheduler').dialog('open');
  9.     });
  10.     // Do more stuff
  11. }
If I alert out the result of .dialog("isOpen") in my click handler then I get some interesting results...

  • Without the destroy I always get false.
  • With the destroy in place, even though I then create the dialog again in the initCampaign function, I get false on the first visit to my tab.  Subsequent visits then alert out [object object].
I'd rather not have to introduce more code to reload the form via yet another ajax call when my open button is clicked.

Does anyone out there have any idea why it's behaving in this way and how I can get it to rebuild the dialog with the new content that's loaded via ajax?

Many thanks
























    • Topic Participants

    • paulc