Open jsf pages in separate tab

[3man]

Hello,
this is my first post so please be gentle

Ok, I want to create form in which top position be menubar, and in center position be tabView.
When user click on menuItem, new tab would be create and show page/tab1.xhtml in his content.

MenuBar is create dynamical, from database.

I manage to create menuBar, and succeed to create new tab on menuItem click, what I cannot do is to open page/tab1.xhtml in tab content.

Also, if someone need tab with close button take a look at the function addTab ..

index.xhtml

Code: Select all

<script type="text/javascript">
                
                function addTab(tabManager, href , label) {
                                        
                    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) { 
                            jQuery(tabManager.jqId).tabs('select',ui.index);                                                        
                        },
                        closable: true, 
                        cache: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 );
                        }
                    );
                    
                    if(jQuery('a[href=#'+ href +']').length != 0) { //tab is already loaded so find the href of the tab and load 
                        var index = jQuery('a[href=#'+ href +']').parent().index();
                        $tabs.tabs('select', index); 
                    } else { //tab not loaded so add a new one 
                        $tabs.tabs( 'add', href, label );
                    } 
                    
                    return false;
                }

                
            </script>

.........
                 <p:layoutUnit id="top" position="top" scrollable="null" gutter="0" zindex="100" height="50" style="margin-bottom: 5px !important;">
                    <h:form>
                        <p:menubar model="#{menuBean.model}" styleClass="main_menuBar" autoSubmenuDisplay="true" />  
                    </h:form>                    
                </p:layoutUnit>

                <p:layoutUnit id="content" position="center" scrollable="null" gutter="0"  zindex="50">

                    <p:tabView styleClass="main_tabView" id="tabNav" dynamic="true" cache="true" widgetVar="tabNav">
                        <p:tab title="Kontak" id="kontakt">  

                            <h:outputText value="... kontakt forma ...."/>

                        </p:tab>
                    </p:tabView>
                </p:layoutUnit>

MenuBean.java

Code: Select all

public MenuBean() throws IOException {
        CachedRowSetImpl crs = null;
        model = new DefaultMenuModel();
        Submenu submenu;
        MenuItem item;
        int id_elementa;
        int id_tipa;
        int id_elementa_owner;
        int back=2;
        String id;

        String sqlstr = null;

        try {
            sqlstr = "SELECT * FROM fnc_menu(1)";
            
            crs = db.executeQuery(sqlstr, 0);
            
            crs.beforeFirst();
            while (crs.next()){
                back=1;
                id_elementa = crs.getInt("id_elementa");
                id_tipa = crs.getInt("id_tipa");

                submenu = new Submenu();
                submenu.setId("app"+crs.getString("id_elementa"));
                submenu.setLabel(crs.getString("opis"));
                submenu.setIcon("ui-icon ui-icon-document");

                while (crs.next()) {
                    id_tipa = crs.getInt("id_tipa");
                    
                    if (id_tipa == 2) { // program
                        
                        id_elementa_owner = crs.getInt("id_elementa_owner");
                        
                        if (id_elementa_owner == id_elementa) {
                            id = "tab_"+crs.getString("naziv");
                            

                            item = new MenuItem();
                            item.setId(id);
                            item.setValue(crs.getString("opis"));
                            item.setIcon("ui-icon ui-icon-document");
                            
                            if(crs.getString("disabled").equals("Y")){
                                item.setStyleClass("diabledItem");
                            }else{
                                item.setOnclick("addTab(tabNav, '"+crs.getString("naziv")+"', '"+crs.getString("opis")+"')");
                            }
                            
                            submenu.getChildren().add(item);
                            model.addSubmenu(submenu);
                        }
                    }
                    
                    back++;

                }
                
                //crs.relative(-back); // dont work!!
                for(int i=0; i<back; i++)
                    crs.previous();

            }




        } catch (SQLException ex) {
            System.out.println("[" + new java.util.Date() + "]\nSQLException: " + ex.getMessage() + "\nSQL:" + sqlstr);
        }

primefaces 2.2.1
tomcat 7.0.11
Mojarra 2.0.4 (FCS b09)
NetBeans 7.0

[cagatay.civici]

TabView has client side method to add tab;

Code: Select all

tabviewWidget.addTab(url, label, index);

[3man]

I tried with this:

change function addTab with adding one more input parameter 'index':

Code: Select all

function addTab(tabManager, href , label, index)

and then add tab with this, as you suggested:

Code: Select all

tabManager.add('pages/page1.xhtml', label, index);

this is pages/page1.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:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Hello from Facelets 1
    </h:body>
</html>

but get this error:

Code: Select all

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy"  code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location: "http://localhost:8088/jEtalon/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=2.2.1 Line: 5169"]

[3man]

Hello again,
I went to holiday so I didn't read this forum for couple week ..

Does anyone have this kind of error regardless tab component?

[zingel]

Sorry for jumping on such old posts, but I have the very same problem.

TabView has client side method to add tab;

Code: Select all

tabviewWidget.addTab(url, label, index);

In Primefaces 3.x or 4.0 there is no such API. but I can find it in Primefaces 2.x. Is there a chance to get it back? Wee need such a behavior in our application.

Tanks.

[kukeltje]

You have multiple options:
- file an issue and wait
- go pro
- fix it yourself (and file a patch)

Cheers

p.s. Next time please create a new post and refer to this one...