Hi Klaus Here is a simplified version of the source code (the real page is 1094 lines long). All I have done is strip out the content within each fragment / panel. Thank you for taking the time out to look at this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <title><?php print $this->metaTitle; ?></title> <script type="text/javascript" src="/js/jquery-1.2.6.min.js"></ script> <script type="text/javascript" src="/js/ui.core.js"></script> <script type="text/javascript" src="/js/ui.tabs.js"></script> <script type="text/javascript" src="/js/jquery.jeditable.mini.js"></ script> <script type="text/javascript" src="/js/jtip.js"></script> <script type="text/javascript" src="/js/thickbox-compressed.js"></ script> <script type="text/javascript" src="/js/tooltip.js"></script> <script type="text/javascript" src="/js/jquery.wysiwyg.pack.js"></ script> <script type="text/javascript" src="/js/jquery.scrollable.min.js"></ script> <!-- custom navigation functions --> <script type="text/javascript"> /*<![CDATA[*/ function addExecutor() { $('#tabtop').tabs({ selected: 1, load: function(e, ui) { var $innertabs = $('#innermemorialtabs', ui.panel); if ($innertabs.length) { $innertabs.tabs(); // <= initialized like this the selected tab will always be 0 selected = $innertabs.data('selected.tabs'); if (selected) { $innertabs.tabs('select', 0); } } } }); } /*]]>*/ </script> </head> <body style="background:url(/images/backgrounds/page-dashboard.jpg) top center no-repeat #02204c;"> <!-- container - start --> <div id="container"> <!-- dash-top - start --> <div id="dash-top"> <!-- tabtop - start --> <div id="tabtop"> <ul> <li><a href="#fragment-1"><span>Main Tab One</span></a></li> <li><a href="#fragment-2"><span>Main Tab Two</span></a></li> <li><a href="#fragment-3"><span>Main Tab Three</span></a></li> </ul> </div> <!-- tabtop - end --> <!-- page - start --> <div class="page"> <!-- fragment-1 (Main Tab One - Content) - start --> <div id="fragment-1"> <!-- action box starts --> <div class="ab-top"></div> <!-- action-box - start --> <div class="action-box"> <div class="ab-alert"> <span class="mainbutton"> <!-- clicking this link must take me to Main Tab Two -> Main Tab Two - Inner Tab One --> <a href="#" onclick="addExecutor();">Add an Executor</a> </span> </div> <div class="clearme"></div> </div> <!-- action-box - end --> <div class="ab-bottom"> </div> <!-- action box ends --> </div> <!-- fragment-1 (Main Tab One - Content) - end --> <!-- fragment-2 (Main Tab Two - Content) - start --> <div id="fragment-2"> <!-- innertabs - start --> <div id="innertabs"> <ul id="innerside"> <li><a href="#fragment-4"><span>Main Tab Two - Inner Tab One</ span></a></li> <li><a href="#fragment-5"><span>Main Tab Two - Inner Tab Two</ span></a></li> <li><a href="#fragment-6"><span>Main Tab Two - Inner Tab Three</span></a></li> </ul> <!-- fragment-4 (Main Tab Two - Inner Tab One - Content) - start --> <div id="fragment-4"> </div> <!-- fragment-4 (Main Tab Two - Inner Tab One - Content) - end --> <!-- fragment-5 (Main Tab Two - Inner Tab Two - Content) - start --> <div id="fragment-5"> </div> <!-- fragment-5 (Main Tab Two - Inner Tab Two - Content) - end --> <!-- fragment-6 (Main Tab Two - Inner Tab Three - Content) - start --> <div id="fragment-6"> </div> <!-- fragment-6 (Main Tab Two - Inner Tab Three - Content) - start --> <div class="clearme"></div> </div> <!-- innertabs - end --> </div> <!-- fragment-2 (Main Tab Two - Content) - end --> <!-- fragment-3 (Main Tab Three - Content) - start --> <div id="fragment-3"> <!-- innermemorialtabs - start --> <div id="innermemorialtabs"> <ul id="innerside"> <li><a href="#fragment-7"><span>Main Tab Three - Inner Tab One</span></a></li> <li><a href="#fragment-8"><span>Main Tab Three - Inner Tab Two</span></a></li> <li><a href="#fragment-9"><span>Main Tab Three - Inner Tab Three</span></a></li> </ul> <!-- fragment-7 (Main Tab Three - Inner Tab One - Content) - start --> <div id="fragment-7"> </div> <!-- fragment-7 (Main Tab Three - Inner Tab One - Content) - end --> <!-- fragment-8 (Main Tab Three - Inner Tab Two - Content) - start --> <div id="fragment-8"> </div> <!-- fragment-8 (Main Tab Three - Inner Tab Two - content) - start --> <!-- fragment-9 (Main Tab Three - Inner Tab Three - Content) - start --> <div id="fragment-9"> </div> <!-- fragment-9 (Main Tab Three - Inner Tab Three - Content) - end --> <div class="clearme"></div> </div> <!-- innermemorialtabs - end --> </div> <!-- fragment-3 (Main Tab Three - Content) - end --> </div> <!-- page - end --> </div> <!-- dash-top - end --> <!-- footer starts --> <div id="footer"> </div> <!-- footer ends --> </div> <!-- container - end --> <!-- debugData - start --> <?php include($this->absAppRootFolder . $this->viewIncludeFolder . "/ debug_info.html"); ?> <!-- debugData - end --> </body> </html> All the best Louis On Oct 23, 12:03 pm, Klaus Hartl <[EMAIL PROTECTED]> wrote: > In what way do you want to change the tab content? Load from Ajax? I > can't really tell what's wrong with partial code and having to guess > what exactly you want to do... > > --Klaus > > On 23 Okt., 12:59, LouisHeim <[EMAIL PROTECTED]> > wrote: > > > Klaus > > Thanks you for responding to my query. Unfortunately I have not been > > able to get your solution working. I am sure that I have done > > something wrong so would you mind taking a look at my implementation > > please? > > > In the page head i have: > > function addExecutor() { > > > $('#tabtop').tabs({ > > selected: 1, > > load: function(e, ui) { > > var $innertabs = > > $('#innermemorialtabs', ui.panel); > > if ($innertabs.length) { > > $innertabs.tabs(); > > // <= initialized like this the selected tab > > will always be 0 > > selected = > > $innertabs.data('selected.tabs'); > > if (selected) { > > > > $innertabs.tabs('select', 0); > > } > > } > > } > > }); > > > } > > > I then have a link in the body: > > <a href="#" onclick="addExecutor();">Add an Executor</a> > > > When I click the link it changes to the correct #tabtop tab but the > > tab content does not change - i.e. only the tabs change. > > > Thanks once again > > Louis > > > Klaus Hartl wrote: > > > Please note that selecting a tab automatically loads it as well, thus > > > with your code you're loading twice which may cause some unexpected > > > results. > > > > The next problem here is that the tab content loads asynchronously, > > > thus at the time you try to acess the inner tabs they're not be loaded > > > yet. You need to move that code into the load handler of the outer > > > tabs. > > > > Here's the reviewed code: > > > > $('#tabtop').tabs({ > > > selected: 2, > > > load: function(e, ui) { > > > var $innertabs = $('#innermemorialtabs', ui.panel); > > > if ($innertabs.length) { > > > $innertabs.tabs(); // <= initialized like this the > > > selected tab will always be 0 > > > selected = $innertabs.data('selected.tabs'); > > > if (selected) { > > > $innertabs.tabs('select', 0); > > > } > > > } > > > }); > > > > --Klaus > > > > On 22 Okt., 13:09, LouisHeim <[EMAIL PROTECTED]> > > > wrote: > > > > Hello, I have managed to select a tab using a text link as described > > > > in an example provided in the faq. However, when I try to select a tab > > > > within that tab the layout is messed up. > > > > For example: > > > > ... > > > > $maintabs = $('#tabtop').tabs(); > > > > $maintabs.tabs('select', 2); > > > > $maintabs.tabs('load', 2); > > > > $innertabs = $('#innermemorialtabs').tabs(); > > > > $selected = $innertabs.data('selected.tabs'); > > > > if ( $selected != 0 ) { > > > > $innertabs.tabs('select', 0); > > > > } > > > > $innertabs.tabs('load', 0); > > > > ... > > > > I am no Javascript fundi and would appreciate any help or advice you > > > > can offer. With Thanks. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
