Jquery click function does not load ajax tabs

Question

I have some tabs that load ajax content. When I click on the tabs it loads the ajax content perfectly no issues works exactly like it does in the Jqueryui demos.

But when I try and change tab using an onclick function it opens the tab but doesn't do the ajax. Is this a known issue can it be done?? Do ajax tabs rely on the user clicking the href to know what to load.

This is the code:

$("#signuptabs").tabs();

<div id="signuptabs">
     <ul>
         <li><a href="type.php"><span>type</span></a></li>
         <li><a href="umber.php"><span>CNumber</span></a></li>
         <li><a href="vices.php"><span>s</span></a></li>
         <li><a href="ups.php"><span>ups</span></a></li>
    <li><a href="ext.php"><span>ext</span></a></li>
        <li><a href="enu.php"><span>IMenu</span></a></li>
        <li><a href="info.php"><span> Information</span></a></li>
     </ul>

</div>


$(".step2next").click(function() $('#signuptabs').tabs("select" , 1));

Its won't load the external content when using the click function.

Answer 1

Jquery UI tabs have a relationship between the link Href and the div id to identify the content of each tab... If your using the regular code provided by Jquery UI, you will need to keep that relationship alive!

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">TAB 01</a></li>
    <li><a href="#tabs-2">TAB 02</a></li>
    <li><a href="#tabs-3">TAB 03</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content for Tab 01 because this Div id is equal to Href content of TAB 01 description</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab 02 because this Div id is equal to Href content of TAB 03 description</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab 03 because this Div id is equal to Href content of TAB 03 description</p>
  </div>
</div>

If you've altered the "standard" way, you need to provide more of your code!

For Ajax Content, using the above Skell, load the content to the proper div ID...

Ps: This is all valid if I'm understanding correctly your question!

Answer 2

I'm not too familiar with the UI tabs, but instead of assigning the tabs function on the click of step 2, you could try triggering the click of the tab itself, for example...

$(".step2next").bind('click',function(){
  $("#tab_id").trigger('click');
});

Just put whatever the tab actually is in for "#tab_id".