• 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

Technique for same fragment shown in multiple tabs

 
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
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?
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Gregg Bolinger
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

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
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
Another question, and this goes to performance.



VS



Is one faster than the other?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
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
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
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
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
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
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
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
Some early testing on scope seems to be that I am doing this correctly. Am I missing anything?
 
reply
    Bookmark Topic Watch Topic
  • New Topic