Question

I am using jQuery to create tabs. I put the javascript code in a separate file. tabset variable is used to reference the tab. Javascript has the following content:

$(document).ready(function() {
//add a tabset
var tabset = $("#tabset").tabs({
    /*add close button*/
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    /*cache tabs*/
    cache: true,
    /*immediately select a just added tab*/
    add: function(event, ui) {
        //alert(ui.panel.id);
        tabset.tabs('select', '#' + ui.panel.id);
    }
});

I could add another tab with the statement below. This works fine if I call this statement from this javascript.

tabset.tabs('add', url, nameToCheck);

I would like to add a new tab to the tabset called #tabset from another javascript file where I could not use tabset variable because it is out of scope.

I try to use jquery selector to find tabset and call add function but the tab is not added. Please check the statement below:

$('#tabset').tabs('add', 'url', 'newTab');

My question is: how to add another tab to existing tabset from any javascript file? How to select an existing tabset and to call an add function?

Best regards,
Javanus

Answer 1

Try to do this:

$(document).ready(function() {
   $("#tabset").tabs({
    tabTemplate: yourtabtemplate,
    cache: true,
    add: function(event, ui) {
        // Change 'tabset' to 'this'
        this.tabs('select', '#' + ui.panel.id);
    }
});

And in the other JS file:

var tabset = $('#tabset');
tabset.tabs('add', url, nameToCheck);

Or simply:

$('#tabset').tabs('add', 'url', 'newTab');

EDIT: the problem is that you probably are adding your first file before your second file. So, $('#tabset') doesn’t have tabs feature from JQueryUI and $('#tabset').tabs('add') is not working.

Switch the order like this:

file1.js:

$(document).ready(function() {
   $("#tabset").tabs({
    tabTemplate: yourtabtemplate,
    cache: true,
    add: function(event, ui) {
        // Change 'tabset' to 'this'
        this.tabs('select', '#' + ui.panel.id);
    }
});

file2.js:

$('#tabset').tabs('add', 'url', 'newTab');

You index view:

<script src="scripts/file1.js"></script>
<script src="scripts/file2.js"></script>

Check file order. Happy codding!