aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes jQuery tabs UI issue Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery tabs UI issue" Watch "jQuery tabs UI issue" New topic
Author

jQuery tabs UI issue

Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9499
    
    2

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?


SCJP 1.4, SCWCD 1.4 - Hints for you, Certified Scrum Master
Did a rm -R / to find out that I lost my entire Linux installation!
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9499
    
    2

Tried something like this:



I'm seeing the alert being triggered but the link does not open.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

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/


GenRocket - Experts at Building Test Data
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9499
    
    2

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



Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9499
    
    2

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.



[Thumbnail for Screenshot_1.png]

[Thumbnail for Screenshot_2.png]

Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9499
    
    2

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?
Joe Harry
Ranch Hand

Joined: Sep 26, 2006
Posts: 9499
    
    2

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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: jQuery tabs UI issue