Problem adding and removing a jquery tab to the existing tabs dynamically.

Posted by kranthi on Stack Overflow See other posts from Stack Overflow or by kranthi
Published on 2010-03-09T07:11:35Z Indexed on 2010/03/09 9:06 UTC
Read the original article Hit count: 307

Filed under:
|
|

hi everyone, I have a href tag, upon clicking it a new jquery tab is added to the existing tabs,using the following js.

$(function() {
        //DECLARE FUNCTION: removetab
        var removetab = function(tabselector, index) {
            $(".removetab").click(function(){
                $(tabselector).tabs('remove',index);
            });
         };

        //create tabs
        $("#tabs").tabs({
           add: function(event, ui) { 
                //select newely opened tab
                $(this).tabs('select',ui.index);
                //load function to close tab
                removetab($(this), ui.index);
           },
           show: function(event, ui) { 
                //load function to close selected tabs
                removetab($(this), ui.index);
           }
        });

        //load new tab
        $(".addtab").click(function(){
            var href=$(this).attr("href");
            var title=$(this).attr("title");
            $("#tabs").tabs( 'add' , href , title+' <span class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;"></span>');
            return false;
        });

    });

and

<a class="addtab" title="Tab Label" href="HTMLPage.htm">Add Tab</a>

If the href attribute for 'a' tag corresponds to a '.htm' page I am able to add & remove the tab successfully.Where as if it corresponds to a '.aspx' page I am able to add a new tab ,but unable to remove the tab upon clicking on the 'close' sign next to the tab title.

Please help.

Thanks in advance

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about ui