Technique for same fragment shown in multiple tabs

[Gregg Bolinger]

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?

[Bear Bibeault]

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]

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]

Another question, and this goes to performance.

$(container + ' .something').....

VS

$(container).find('.something')....

Is one faster than the other?

[Bear Bibeault]

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]

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]

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

schedule.js

$(function() {
    var tabs = $('#tabs').tabs({...});

    // inside a double click event I do the following
    if (date >= now) {
        var tabId = '#tabs-' + now.getTime();
        var tab_title = "New event - " + $.datepicker.formatDate('mm/dd/yy', date);
        tabs.tabs('add', tabID, tab_title);
        $('#tabs-' + mills).load(contextPath + '/event/create', {tabId:tabId}, function() {
            setupEvent(tabId, date, now);
            $tabs.tabs('select', tabId);
        });
    }
});

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]

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...

<script type="text/javascript">
  var tab = "${tabId}";
</script>
<script type="text/javascript" src="${resourceLinkTo(dir: 'js/event', file: 'event.js')}"></script>

[Gregg Bolinger]

Some early testing on scope seems to be that I am doing this correctly. Am I missing anything?