Tabstrip with buttons in tab (x for close etc.)

2 posts, 0 answers
  1. Lee Saunders
    Lee Saunders avatar
    20 posts
    Member since:
    Jul 2009

    Posted 18 Aug 2014 Link to this post

    I have a tabstrip that I am loading with some buttons (x for close etc.) in the tab, not the content area.

    I need to be able to determine if the tab that contains the button that was clicked is the currently selected tab (because, I need to access the content of that tab for one of the button's functionality) and I would like to jump out of the javascript if the tab is not the currently selected one.

    Here is the complete code I'm using to build my tabs.

        function loadTab(name, id, url, pinned) {


            if (name == "Log Out") {
            //special case for logout redirect.  
            //replace puts the url in page history so the user cannot use the back button to navigate back to the application without logging in
            if (name == "Log Out") {
            var $item = $("#" + id).parents('li');

            if ($item.length != 0) {
            } else {
                var html = "<span id='" + id + "' class='k-button k-button-icon'>" +
                    "<span class='fa fa-times fa-small fa-button'></span>" +
                    "</span>" +
                    "<span id='" + id + "-pin' class='k-button k-button-icon'>" +
                    "<span class='fa fa-thumb-tack fa-rotate-90 fa-small fa-button'></span>" +
                    "</span>" +
                    "<span id='" + id + "-window' class='k-button k-button-icon'>" +
                    "<span class='fa fa-caret-right fa-regular-lift fa-button'></span>" +

                    url: url,
                    type: 'get',
                    success: function (data) {
                        // Wrap the tab content's HTML with a div that has a style display:relative 
                        //so that ew can use wait dialogs.
                        var divData = "<div class='connect-tab-wait-dialog-wrapper'>" + data + "</div>";
                            encoded: false,
                            id: id,
                            text: name + html,
                            content: divData
                        $("#" + id).click(function() {

                        if (pinned === 'True') {
                            $("#" + id + "-pin").children("span").toggleClass("fa-rotate-90");

                        //The pin on the tab is used to set the app up to be automatically loaded on startup
                        //so when toggled, the event will make an ajax call to add/remove the app from the 
                        //OSD_USERS_APPLICATIONS_PINNED database table.
                        $("#" + id + "-pin").click(function () {
                  , id);
                        $("#" + id + "-window").click(function() {
                        $item = $("#" + id).parents('li');


                    error: function (x, e) {

                        if (x.status == 404) {
                            connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>404 - Not Found</div>", null, false);
                        else if (x.status == 401) {
                            connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>401- Unauthorized</div>", null, false);
                        else if (x.status == 402) {
                            connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>403 - Access Denied</div>", null, false);

                // Update the application use count so that the "Favorites" widget shows their most used applications
                    url: 'Home/UpdateApplicationUseCount',
                    type: 'POST',
                    data: JSON.stringify({ applicationPk: id }),
                    contentType: 'application/json;',
                    success: function (result) {
                        if (result === true) {
                    error: function () {

    The loadWindow function takes the content of the tab and pops it out into its own window.  When the tab is not the current tab, it gets the content from the wrong tab.

    I tried setting the selected tab first, but that did not seem to work.

        function loadWindow(me) {

            var innerHtml = $(tabStrip.contentHolder(,
                win =,
                outerHtml = $.ajax({
                        type: "GET",
                        url: 'Home/Wrapper',
                        async: false,
            outerHtml = outerHtml.replace('[innerHTML]', innerHtml);

            try {
            } catch(e) {


  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 20 Aug 2014 Link to this post

    Hello Lee,

    To understand which element is currently actively displayed you can use the select method.

    Here it is in action:

    Kind Regards,
    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top