How to implement UI tabs using jQuery

**Joko** · 23-09-2009

I am using Jquery U.I tabs as a plugin to my site. I've got some three html tables which I wanted to put into tabs, I thought because I am using them as ajax content that after each time a person clicks on the tab that the previous tab is destroyed and not hidden. 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.

**Dodge** · 23-09-2009

When jQuery makes the Ajax request for a tab's contents, that content is not loaded into a separate window the way that it would be with an iframe. This is an example where you could implement your jQuery using the following table format.

Code:

<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>

**Alejandro** · 23-09-2009

In order to get different menu options in brain_menuframe.jsp, you must have JSP code which checks a request parameter or some input and changes the options using JSP -- right? I have one main page that contains the html tags like <html>, <body> and in this I have all tabs that has links to my Asp.net MVC controller views. So you're saying that the menuframe.jsp file is not re-executing? In my tests, it does, so it isn't simply because you are using iframes.

**Luther** · 23-09-2009

The syntax for your HTML is actually really similar if you are doing AJAX or non-AJAX. We’re going to have our DIV with the correct ID. The HTML for a tab is replaced when you click the tab a second time. But that won't "replace" any script -- script isn't part of the DOM. Once script is loaded into the page, it's there for the life of the page. We have our URL bulleted list, our UL, and then we have our list items in between. With the LiveQuery plugin, you can detect when the elements coming into being so you can wait to apply the picker behavior until the elements are created.