• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

jQuery tabs UI issue

 
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 San
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Tried something like this:



I'm seeing the alert being triggered but the link does not open.
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 San
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 San
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 San
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 San
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic