jQuery tabs UI issue

Fellas,

I'm using the jQuery UI tabs and have a set of tabs defined. In each of those tabs, I would be having some links and I would like to open the results of those link click on the same tab itself rather that being opened in a new window.



The example from jQeury website shows this:



But I guess this is to open the tabs in the same panel which is the default behaviour. How do I now get the links also open up in the same tab panel?

Tried something like this:



I'm seeing the alert being triggered but the link does not open.

jQuery selectors are awesomely powerful and you can get as fancy as you want with regards to selecting elements you need. That said, I always try and be as specific as I possibly can. It not only keeps your selectors simpler, but it will also improve performance because it means less DOM traversal for jQuery.

Why do:



When you can do



Your example code doesn't really match with what you're trying to do. You're ID for the tabs in the HTML is #tabs but your code uses #example. Also, the HTML isn't loading tabs via ajax on demand but your JavaScript implies that it does because of using the load: event. So it is difficult to determine where the actual problem is.

Personally, I'd use the jQuery's live() function over the load event if all you need to do there is apply a click handler. I have a demo working on jsfiddle. Maybe you can modify your code from my demo and make something work:

http://jsfiddle.net/KN2rc/1/

Thanks for the help:

The code that I posted above was just a sample that I was trying with a static html page. So there was some confusion with copy pasting stuff here. anyways, below is what I tried:



The above code sample seems to work perfectly.

When I tried the jsfiddle example, the link opens in a new window rather than in the same tab. Here is how I used it (with the live function):

I have another design related question. The entire application that I'm building is based on struts and tiles. Now if I click on the link that opens a new page on the same tab. Well good for one flow. But what if this url redirects to the home page? Attached is the screenshot of one such redirect. Looks wierd. How to get rid of this situation and make the redirect not to appear under the tab but rather refresh the entire page? I'm attaching the screenshots of the flow.

To get around with the problem above, I decided to use forms instead of using urls.

Following is what I have:



And the Javascript:


What I need to do instead is to use a form instead of a href. Well, in that case how will the load function work in the above javascript if I click a submit button in my form?

Just found some good reference here. Will try this http://www.andyjarrett.co.uk/blog/index.cfm/2010/1/26/Submit-jQuery-tabs-back-on-to-itself