Question

I have the following simple code:

var tabs = null;
function addTab(id, title, data) {
    alert("Begin: " + data.name);
    if (tabs === null) {
        tabs = $("#center-tabs").tabs({
            tabTemplate: "<li style='line-height: 0.5'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            add: function (event, ui) {
                alert("Event: " + data.name);
            }
        });
    }
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}

When I call:
addTab(“#tab-1”, “Tab-1”, {
name: “Example 1”
});
two alerts are displayed (“Begin: Example-1” and “Event: Example-1”)

But if I call again:
addTab(“#tab-2”, “Tab-2”, {
name: “Example-2”
});
two alerts are displayed but first one with correct message and second with the message of the first call (“Begin: Example-2” but “Event: Example-1”)

What I’m doing wrong?
Is it a tabs implementation bug?

Thanks in advance

Answer 1

No, it is not a bug.

First time you call addTab() variable tabs is null so the body of if-statement is executed. Inside the if you define add method with a body works with data.name (Example 1). This is expected.

The problem is that during the 1st run a closure is created that contains the data variable with Example 1 value. When you call your addTab() 2nd time tabs is already created and inside the add method data.name is still referring to the old data.name which got saved during the 1st run. Your alert() cannot see the new value of the data.

See http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ .

You can solve it by not accessing addTabs variables/parameters inside add directly because that will “save them” into a closure, but using other mechanism such as jQuery’s .data().

var tabs = null;
function addTab(id, title, data) {
    if (tabs === null) {
        tabs = $("#center-tabs").tabs({
            tabTemplate: "...",
            add: function (event, ui) {
              console.log("Event: " + $(this).data('name'));
            }
        });
    }
    tabs.data('name', data.name);
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}

HERE is an example.