problem with tab close button

3man · 07 Jul 2011, 23:34

hello,
I have problem with close button on tab.
when tab is added, button is visible, but when content is loaded button is disappear?

Code: Select all

function addTab(tabManager, href , label, index) {

    var tabExists = false;
    
    var $tabs = jQuery(tabManager.jqId).tabs({
        tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
        add: function(event, ui) { 
            $(this).tabs('select',ui.index);
        },
        closable:true
    });
                    
    jQuery(tabManager.jqId+' span.ui-icon-close' ).live( 'click', 
        function() {
            var index = jQuery( 'li', $tabs ).index( jQuery( this ).parent() );
                            
            if(index != -1)
                $tabs.tabs( 'remove', index );
        }
        );

    jQuery(tabManager.jqId+' ul li a').each(function(i) {
        if (this.text == label) {
            tabExists = true;
            index = i;
        }
    });

                    
    
    if(tabExists) {
        $tabs.tabs('select', index);
    } else {
        $tabs.tabs('add', '#'+href, label);
    }
                                        
                                        
    alert("stop ...")
    return true;
}

when message 'stop' is show I can see close button, but after that content is start to loading and at the end button is not visible.

index.xhtml

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">


    <p:growl id="messages"/> 

    <ui:composition template="resources/templates/template.xhtml">
        <ui:define name="content">
            <h:form prependId="false">
                <h:panelGroup layout="block" styleClass="menu">
                    <ui:include src="resources/templates/menu.xhtml"/>  
                </h:panelGroup>

                <p:tabView styleClass="main_tabView" id="tabNav" widgetVar="tabNav" >  
                    <p:tab title="albums" id="albums" rendered="#{menuBacking.albums}">  
                        <ui:include src="/pages/albums.xhtml"/>  
                    </p:tab>
                    <p:tab title="band" id="band" rendered="#{menuBacking.band}">  
                        <ui:include src="/pages/band.xhtml"/>  
                    </p:tab>
                    <p:tab title="concerts" id="concerts" rendered="#{menuBacking.concerts}">  
                        <ui:include src="/pages/concerts.xhtml"/>  
                    </p:tab>
                    <p:tab title="contacts" id="contacts" rendered="#{menuBacking.contacts}">  
                        <ui:include src="/pages/contacts.xhtml"/> 
                    </p:tab>
                </p:tabView>
            </h:form>
        </ui:define>

    </ui:composition>

</html>

I guess it is something wrong with PPR ..

robert.m · 08 Jul 2011, 09:29

hello 3man,

while I unfortunately can't help you with your issue, I found something in your code that could cause you some problems:

Code: Select all

<p:tabView styleClass="main_tabView" id="tabNav" widgetVar="tabNav" >

Using the same name for id and widgetVar can lead to problems - mostly in combination with IE. I don't know if this can be a problem with the tabView-Component, but it sure was with some of the components.

Cagatay confirmed this:

Yes, with IE, that is a known fact. Be sure not to give same name to widgetVar and element id.

25 Jul 2011, 17:32

This is a built-in feature now;

http://www.primefaces.org/showcase-labs ... osable.jsf

problem with tab close button

Who is online