Tutorial :Stuck using jQuery UI Tabs


I've got hree html tables which I wanted to put into tabs.

All three tables can be loaded using AJAX but i want to show the first table and ALSO allow the first table to be ajaxable.

Lastly, I need to have the option for the user to SEARCH in the 3rd tab and those results (html result) goes into that tab.

The problem is: When I run my current code, it's not allowing me to click the tabs (it shows some uglyish style in FireFox) and the 3rd tab is only shown.

this is the before.

<h2>Title 1</h2>  <table>....data_A....</table>  <br/><br/>    <h2>Title 2</h2>  <table>....data_A....</table>  <br/><br/>    <h2>Title 3 - Search</h2>  <input id="name" type="textbox" />  <input id="search" type="submit" value="Search" />      <br/><br/>  

and this is my jQuery attempt code.

<asp:Content ContentPlaceHolderID="JavaScriptContent" runat="server">  <link type="text/css" href="../../Content/smoothness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />    <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>   <script src="/Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>   <SCRIPT type=text/javascript>      $(function() {          $("#tabs").tabs();      });  </SCRIPT>  </asp:Content>    <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">    <div id="tabs">      <ul>          <li href="ajax/data_a">Title 1</li>          <li href="ajax/data_b">Title 2</li>          <li href="#tab-3">Search</li>      </ul>      <div id="tab-1">          .... data_A table is put here ...           .... but will be updated via ajax when the tabs is clicked.      </div>              <div id="tab-3">          <input id="name" type="textbox" />          <input id="search" type="submit" value="Search" />          </div>  </div>  </asp:Content>  

can anyone help me? what have i done wrong?

cheer :)


You have to have an a tag inside the li's. li's don't have the href attribute.

<li><a href="ajax/data_a">Title 1</a></li>  <li><a href="ajax/data_b">Title 2</a></li>  <li><a href="#tab-3">Search</a></li>  

Just at the source here: http://stilbuero.de/jquery/tabs_3/

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »