This week's book giveaway is in the OCAJP forum.
We're giving away four copies of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) and have Khalid A Mughal & Rolf W Rasmussen on-line!
See this thread for details.
Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jQuery tabs UI issue

 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Tried something like this:



I'm seeing the alert being triggered but the link does not open.
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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/
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

Screenshot_1.png
[Thumbnail for Screenshot_1.png]
Screenshot_2.png
[Thumbnail for Screenshot_2.png]
 
Joe Harry
Ranch Hand
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 10124
3
Eclipse IDE Mac PPC Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic