jQuery Forum

Hey everyone, I've got a quick question about closing UI Dialogs when you change a UI Tab.

I'm developing a multi-part product configuration page that I divided up into tabs using jQuery.  Each step in the product configuration has a question, a form field for user input, and a question mark image button that brings up a jQuery Dialog box that is being used as a Tooltip.

Because I have multiple tooltips, I made each tooltip dialog & opener elements unique, but I have all the dialogs in the same class.  I think this might be what is causing the problem.

I instantiate all the dialogs using the class selector, but when the opener element is clicked, I use the element ID (instead of class) to open/close each individual tooltip.

I then have the tabs set up so the dialog class selector is used to close all the open tooltips.

This setup works, but it is a little glitchy.  All the open dialogs will close when a tab changes, but if you click on the tabs and load other tabs, the dialog boxes will briefly show up and disappear.  I was hoping I could find a way around that.

Here is some of the code I'm working with:
TOOLTIP/DIALOG HTML:

1. <div class="dialog" id="dialog_NUMBER" title="Tooltip">
       <p>This is a test tooltip</p>
   </div><img src="../template/images/questionmark.png" id="opener_NUMBER" class="opener">
   

JQUERY UI TABS:

1. //Initialize JQuery Tabs
       $('#tabs').tabs();
      
   //This is the current code I'm using to close all open dialog boxes when tabs change
       $('#tabs').tabs({
          select: function(event, ui){
              $(".dialog").dialog("close");
          }
       });
      
       //Select most recently added tab
       var tabSize = $('#tabs').tabs("length");
       $('#tabs').tabs("select", $('#tabid').val() - 1);
   

Here is the code to instantiate the dialog boxes/tooltips and manage the tooltip opener buttons:

1. $( ".dialog" ).dialog({
           autoOpen: false,
           show: "blind",
           hide: "explode"
       });
   
       $( ".opener" ).click(function(event) {
           var $target = $(event.target);
          
           var position = $target.position();
          
           var tgt_id = $target.attr('id');
           var parts = tgt_id.split('_');
           tgt_id = parts[1];
          
           if(!$("#dialog_"+tgt_id).dialog("isOpen"))
           {
               var x = position.left + ($target.outerWidth() + 325);
               var y = position.top + jQuery(document).scrollTop();
              
               $( "#dialog_"+tgt_id ).dialog('option', 'position', [x, y]);
              
               $( "#dialog_"+tgt_id ).dialog( "open" );
              
           } else {
               $( "#dialog_"+tgt_id ).dialog( "close" );
           }
   
           return false;
       });