add jquery tab dynamically from another javascript

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

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!