aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Technique for same fragment shown in multiple tabs Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Technique for same fragment shown in multiple tabs" Watch "Technique for same fragment shown in multiple tabs" New topic
Author

Technique for same fragment shown in multiple tabs

Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

I'm experimenting with a page design where I am opening forms/pages in tabs and you could have several of these tabs with, basically, the same HTML fragment, just different data. There is quite a bit of JavaScript going on in this fragment and I'm wondering what is the best way to do my jquery selectors so that I don't pull the same elements from multiple tabs.

My currently implemented design is there is a parent container (the tab) that get's a unique ID. I then use that parent container to do all my other lookups. It works, but it seems slightly complex.

How else would you approach this?


GenRocket - Experts at Building Test Data
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61761
    
  67

That's pretty much what I tend to do. I'll sometimes use the parent id in the selector, or more often I'll supply the parent as the context parameter -- the second param to $() -- which lends itself to more reusable code.

When dealing with events, using the .closest() method is very handy for locating the enclosing parent of the event's target element.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

Bear Bibeault wrote:That's pretty much what I tend to do. I'll sometimes use the parent id in the selector, or more often I'll supply the parent as the context parameter -- the second param to $() -- which lends itself to more reusable code.

When dealing with events, using the .closest() method is very handy for locating the enclosing parent of the event's target element.


Thanks Bear. The closest() method I hadn't thought of. That will help out a bit.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

Another question, and this goes to performance.



VS



Is one faster than the other?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61761
    
  67

To be honest, I haven't done a lot of performance testing (yet*), but would suspect that the latter would be faster as it has a smaller context to search within. On the other hand, the jQuery team spends a great deal of time making sure that selectors are fast so....










* cryptic reference intended
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

The latter is absolutely easier on the eyes. I just wanted to make sure I wasn't going to bring my pages to a halt. Thanks, Bear.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

Alright, more questions along these lines, but slightly different issue now...

schedule.js


So my question is more about scope, I suppose, than anything else. The HTML that is returned in the $.load() method has some javascript included with it. I need it to know about the tabId because that is what I'm using as the parent container for all my selectors. I've passed the tabId into the request and I'm forwarding it back the HTML. What's the best way for that HTML fragement's JavaScript to get this ID, but it be within the scope of that particular executing script vs another tab's version of that ID ? I hope that makes sense.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

This seems to work, but I still need to test scope issues between more than one tab with the same fragment. This is in my HTML fragment loaded from the ajax call...

Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

Some early testing on scope seems to be that I am doing this correctly. Am I missing anything?
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Technique for same fragment shown in multiple tabs