jQuery tab widget in a dialog: display error

Photosona

New Member
I have a jQuery tab widget inside a dialog. When the Advisers image is clicked for the first time in this Fiddle, the dialog and the tab widget display fine. If however the dialog is closed and the image is clicked a second time, the dialog renders but the tab widget doesn't. I think it has to do with the toggle() method used on the tab widget but if I remove that method, the tab widget never displays. It's almost like I need to 'reinitialise' the page state when the dialog is closed in order to get the tab dialog to render on the second and subsequent click of the Adviser image (forgive my grappling with UI terminology here, I'm a server-side coder). Can anyone give me a pointer, please?HTML<a href="http://stackoverflow.com/questions/15709923/#" id="advisers-image"> <div class="circle hovershadow advisers advisers-box-shadow text">Professional advisers</div></a><a href="http://stackoverflow.com/questions/15709923/#" id="industry-image"> <div class="circle hovershadow industry industry-box-shadow">Industry</div></a><div style="clear: both;"></div><div id="advisers-dialog" class="dialog"> <div id="tabs"> <ul> <li><a href="http://stackoverflow.com/questions/15709923/#tabs-1">Law firms</a></li> <li><a href="http://stackoverflow.com/questions/15709923/#tabs-2">Accounting and audit firms</a></li> <li><a href="http://stackoverflow.com/questions/15709923/#tabs-3">Management consultants and economists</a></li> </ul> <div id="tabs-1"> <p>Law firm text goes here.</p> </div> <div id="tabs-2"> <p>Accounting and audit firm text goes here.</p> </div> <div id="tabs-3"> <p>Management consultants and economists text goes here.</p> </div> </div></div><div id="industry-dialog" class="dialog" title="Industry">Industry text goes here</div>Javascript<script type="text/javascript">$( "#tabs" ).tabs().hide();</script><script type="text/javascript"> $( "#industry-dialog" ).dialog({ autoOpen: false });$( "#industry-image" ).click(function() {$( "#industry-dialog" ).dialog( "option", "modal", true );$( "#industry-dialog" ).dialog( "option", "height", "auto" );$( "#industry-dialog" ).dialog( "option", "width", 700 );$( "#industry-dialog" ).dialog( "open" );});</script><script type="text/javascript"> $( "#advisers-dialog" ).dialog({ autoOpen: false });$( "#advisers-image" ).click(function() {$( "#advisers-dialog" ).dialog( "option", "modal", true );$( "#advisers-dialog" ).dialog( "option", "height", "auto" );$( "#advisers-dialog" ).dialog( "option", "width", 700 );$( "#advisers-dialog" ).dialog( "open" );$( "#tabs" ).tabs( "option", "heightStyle", "content" );$( "#tabs" ).tabs( 'select', 0 );$( "#tabs" ).toggle();});</script>
 
Back
Top