add jquery tab dynamically from another javascript

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

Fran Verona · Accepted Answer · 2011-03-12 13:08:06Z

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!

edited Mar 12, 2011 at 13:08

answered Mar 12, 2011 at 12:40

Fran Verona

5,4866 gold badges49 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

javanus Over a year ago

Hi, thank you for a quick response but this is not working. I have already put $('#tabset').tabs('add', 'url', 'newTab'); in my example. The problem is that this is not working. Any other solution? The problem is, that add is not working when it is referenced with $('#tabset_name').

Fran Verona Over a year ago

@javanus Did you remove var tabset = $('#tabset').tabs({... from your file, and just write $('#tabset').tabs({... as I did?

Fran Verona Over a year ago

@javanus I edit my own answer. I think that file order could be getting you in troubles.

javanus Over a year ago

Hi, Fran. I have developed a test case and I found out that $('#tabset').tabs('add', 'url', 'newTab') works fine but it does not work in my project. New tab is added only the first time when the user click on the menu item. I must find out where is the problem. Thank for your help. Regards, Javanus

javanus Over a year ago

I found out the reason for the problem with adding tabs. My application uses struts2-jquery-plugin. Tabs stop to work each time I add <sj:head jqueryui="true"/> to the jsp page. Adding tabs stop to work after the fist tab is added. Regards, Javanus

|

Collectives™ on Stack Overflow

add jquery tab dynamically from another javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related