nested tabs with forms and ajax loads

nested tabs with forms and ajax loads

I am stumped and would like some insight into a problem I am encountering when attempting to utilize the ui.tabs functionality of jquery.

I currently have a master template file which looks like the following:

  1. <script type="text/javascript">
       var $j = jQuery.noConflict();
       $j(document).ready(function(){
        var loading = '<img src="{$templates}/images/loading.gif" width="20" height="20" alt="Loading content..." title="Loading content..." />';
        var tabID=$j.cookie("tabID")||0;
        $j("#tabs").tabs({
         cache: false,
         fxAutoHeight: true,
         fxSlide: true,
         fxFade: true,
         fxSpeed: 'fast',
         selected: tabID,
         show: function(junk,ui){
          $j.cookie("tabID",ui.index);
         },
         spinner: loading
        });
        $j('.auth-form').live('submit', function() {
         $j('.ui-tabs-panel:visible').html(loading);
         $j.ajax({
          data: $j(this).serialize(),
          type: $j(this).attr('method'),
          url: $j(this).attr('action'),
          success: function(response) {
           $j('.ui-tabs-panel:visible').html(response);
          }
         });
         return false;
        })
       });
      </script>





























  2.   <div id="tabs" class="tabs ui-corners-all">
       <ul id="tabID">
        <li><a href="content.php?do=0x00e0"><span><img src="images/icons/icon-tools.png"/></span>&nbsp;<strong>Options</strong></a></li>

  3.    </ul>
      </div>

The file 'content.php' loads a secondary template with a set of tabs and looks like the following:
  1. <script type="text/javascript">
     var $j = jQuery.noConflict();
     $j(document).ready(function(){
      var loading = '<img src="{$templates}/images/loading.gif" width="20" height="20" alt="Loading content..." title="Loading content..." />';
      var tabIDConfig=$j.cookie("tabIDConfig")||0;
      $j("#tabsConfig").tabs({
       cache: false,
       fxAutoHeight: true,
       fxSlide: true,
       fxFade: true,
       fxSpeed: 'fast',
       selected: tabIDConfig,
       load: function(junk,ui){
        //$j('a', ui.panel).click(function() {
         $j(ui.panel).load($j(this).href);
         return false;
        //});
       },
       show: function(junk,ui){
        $j.cookie("tabIDConfig",ui.index);
       },
       spinner: loading
      });
      $j('.auth-form').live('submit', function() {
       $j('.ui-tabs-panel:visible').html(loading);
       $j.ajax({
        data: $j(this).serialize(),
        type: $j(this).attr('method'),
        url: $j(this).attr('action'),
        success: function(response) {
         $j('.ui-tabs-panel:visible').html(response);
        }
       });
       return false;
      })
     });
    </script>
    <div id="tabsConfig" class="tabs ui-corners-all">
     <ul id="tabIDConfig" class="tabID">
      <li><a href="content.php?do=0x00ea"><span><img src="/images/icons/icon-users.png" /></span>&nbsp;<strong>Groups</strong></a></li>
    </ul>
    </div>








































As you can see the nested tabs should perform the same functionality in regards to loading the content but I am very unaware as to why I cannot get the template generated on the second set of tabs to load within the nested tab 'visible' container.

Any help or pointers is appreciated. Oh yeah the ajax stuff is used to hijack the submit of forms within either the primary tab or the nested tab. Thanks in advance.