p:commandButton action has not being called in dynamic pages

Question

I have an application that has a layout with left and center layout units (demoLayout.xhtml). On main page (main.xhtml) i have p:tree on left layout unit (demoTree.xhtml) and three different forms on center layout unit (first.xhtml, second.xhtml, third.xhtml). Center forms switches using tree node clicks. My default center form is first.xhtml and when i do not put p:commandButton on first.xhtml command buttons on second.xhtml and on third.xhtml actions has not being called. When i put p:commandButton on first.xhtml the other command buttons works, but i do not want to put p:commandButton on first.xhtml. How can i do?

demoLayout.xhtml

    <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">

    <f:view id="mainPanel" encoding="UTF-8" contentType="text/html">

        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
                <title>#{title}</title>
            </f:facet>

        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit id="left" position="west" size="300" resizable="true" closable="true" collapsible="true" header="Quick Links" visible="true" minSize="200">
                    <div id="west">
                        <ui:insert name="west">
                            Default West Content
                        </ui:insert>
                    </div>
                </p:layoutUnit>

                <p:layoutUnit id="center" position="center">
                    <div id="centerDiv">
                        <ui:insert name="center">
                            Default Center Content
                        </ui:insert>
                    </div>
                </p:layoutUnit>

            </p:layout>

        </h:body>
    </f:view>

    </html>

main.xhtml

<ui:composition template="demoLayout.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">

        <ui:param name="title" value="demo" />

    <ui:define name="west">
        <ui:include src="demoTree.xhtml" />
    </ui:define>

    <ui:define name="center">
        <ui:include src="#{demo3MBean.activePanel}" />
    </ui:define>

</ui:composition>

demoTree.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <h:form id="treeForm">

    <p:growl id="messages" showDetail="true" sticky="false" />

        <p:tree value="#{demoTreeBean.root}" var="node" id="tree" animate="true"    style="width:350px;height:720px" dynamic="true" cache="false"
        selectionMode="single">

            <p:treeNode type="First">
                <h:outputText value="#{node}" id="lblNode1" />
            </p:treeNode>
            <p:treeNode type="Second">
                <h:outputText value="#{node}" id="lblNode2" />
            </p:treeNode>
            <p:treeNode type="Third">
               <h:outputText value="#{node}" id="lblNode3" />
            </p:treeNode>
            <p:ajax event="select" update=":rightForm" listener="#{demo3MBean.onNodeSelect}" />
        </p:tree>

        <p:blockUI block=":center" trigger="tree">  
        LOADING<br />
            <p:graphicImage value="/images/ajax-loader.gif" />
        </p:blockUI>

    </h:form>

 </ui:composition>

first.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui">

    <h:form id="rightForm">

    <p:growl id="messages" showDetail="true" sticky="false" />

        <br></br>

        <p:fieldset id="resourceList" legend="1 nolu grup">

            <h:outputText value="1 Nolu XHTML" />
        <br />
            <ui:remove> 
            <p:commandButton id="buton" value="Print Me 1" actionListener="#{demo3MBean.printMe1}" />
            </ui:remove>
        </p:fieldset>

    </h:form>

</ui:composition>

second.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui">

    <h:form id="rightForm">

        <p:growl id="messages" showDetail="true" sticky="false" />

        <br></br>

        <p:fieldset id="resourceList" legend="2 nolu grup">

            <h:outputText value="2 Nolu XHTML" />
            <br />
            <p:commandButton id="buton" value="Print Me 2" actionListener="#{demo3MBean.printMe2}" />

        </p:fieldset>

    </h:form>

</ui:composition>

third.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui">

    <h:form id="rightForm">

        <p:growl id="messages" showDetail="true" sticky="false" />

        <br></br>

        <p:fieldset id="resourceList" legend="3 nolu grup">

            <h:outputText value="3 Nolu XHTML" />
            <br />
            <p:commandButton id="buton" value="Print Me 3" actionListener="#{demo3MBean.printMe3}" />

        </p:fieldset>

    </h:form>

</ui:composition>

Demo3MBean.java

@ManagedBean(name = "demo3MBean")
@ViewScoped
public class Demo3MBean extends TlosSWBaseBean implements Serializable {

    private static final long serialVersionUID = -504537811128309503L;

    private String activePanel = FIRST_PANEL;

    public final static String FIRST_PANEL = "first.xhtml";
    public final static String SECOND_PANEL = "second.xhtml";
    public final static String THIRD_PANEL = "third.xhtml";

    public void onNodeSelect(NodeSelectEvent event) {

        String nodeType = event.getTreeNode().getType();
        if (nodeType.equals("First")) {

            activePanel = FIRST_PANEL;

        } else if (nodeType.equals("Second")) {

            activePanel = SECOND_PANEL;

        } else if (nodeType.equals("Third")) {

            activePanel = THIRD_PANEL;
        }

    }

    public void printMe1(ActionEvent e) {
        System.out.println("Me 1");
    }

    public void printMe2(ActionEvent e) {
        System.out.println("Me 2");
    }

    public void printMe3(ActionEvent e) {
        System.out.println("Me 3");
    }

    public String getActivePanel() {
        return activePanel;
    }

    public void setActivePanel(String activePanel) {
        this.activePanel = activePanel;
    }

}

DemoTreeBean.java

@ManagedBean(name = "demoTreeBean")
public class DemoTreeBean {

    private TreeNode root;

    @SuppressWarnings("unused")
    public DemoTreeBean() {
        root = new DefaultTreeNode("Root", null);
        TreeNode node0 = new DefaultTreeNode("First", "First Node", root);
        TreeNode node1 = new DefaultTreeNode("Second", "Second Node", root);
        TreeNode node2 = new DefaultTreeNode("Third", "Third Node", root);

    }

    public TreeNode getRoot() {
        return root;
    }
}

I also read these :

score 1 · Answer 1 · answered Aug 21 '13 at 06:12

1

This part from main.xhtml is the cause of your problem.

<ui:define name="center">
    <ui:include src="#{demo3MBean.activePanel}" />
</ui:define>

changing value of src at runtime does not work.

Try it with a static value like

<ui:define name="center">
    <ui:include src="third.xhtml" />
</ui:define>

and you will see that buttons work.

answered Aug 21 '13 at 06:12

Kerem Baydoğan

9,716
1
37
49

Thanks for reply, but i can not use static page value. I want to change center xhtml at runtime. – merve Aug 21 '13 at 08:18

score 1 · Answer 2 · answered May 18 '14 at 17:40

Changing value of src at runtime will not work.

<ui:define name="center">
    <ui:include src="#{demo3MBean.activePanel}" />
</ui:define>

Alternative solution to conquer your problem is using a rendered flag for your xhtml pages.For example

<ui:define name="center">

<s:div rendered="#{demo3MBean.firstFlag}">
    <ui:include src="first.xhtml" />
</s:div>

<s:div rendered="#{demo3MBean.secondFlag}">
    <ui:include src="second.xhtml" />
</s:div>

<s:div rendered="#{demo3MBean.thirdFlag}">
    <ui:include src="third.xhtml.xhtml" />
</s:div>

</ui:define>

Set all pages flag to FALSE intially. Make the specific flag value as TRUE only when the relevant tree node is clicked. Do not forget to set unique "id" of all components of the included pages.

Using the above solution, attributes like action and actionListener of components such as commandButtons, commandLinks etc will also work normally and perfectly.

Hope this will solve your problem. And also do not forget to accept my answer if it helps. Have a nice Day!!

score 0 · Answer 3 · answered Aug 21 '13 at 10:08

It is just impossible to include a different file by updating the form inside of the included file. As you have the form rightForm in each of your files, you are only updating the rightForm of the currently loaded file when a tree node is selected. So there will never be a different file loaded.
Besides it is a bad approach to define the same form in each file when it exists in everyone (similiar for the growl).

To fix this remove the h:form in first.xhtml, second.xhtml and third.xhtml and change the second ui:define in your main.xhtml to the following:

<ui:define name="center">
    <h:form id="rightForm">
        <ui:include src="#{demo3MBean.activePanel}" />
    </h:form>
</ui:define>

And why are you defining three p:treeNodes in the p:tree? As you are initializing the tree in the DemoTreeBean there is no need to define the treenodes manually. The p:tree is just iterating through the nodes of the given value, as you can see in the showcase. Try the following code to reduce the effort when adding more tree nodes:

<p:tree value="#{demoTreeBean.root}" var="node" id="tree" animate="true" 
  style="width:350px;height:720px" dynamic="true" cache="false"
  selectionMode="single">
    <p:treeNode type="#{node.data}">
        <h:outputText value="#{node}" id="lblNode1" />
    </p:treeNode>
    <p:ajax event="select" update=":rightForm" listener="#{demo3MBean.onNodeSelect}" />
</p:tree>

Thanks but before asking my question, i also tried your suggestion and it did not worked. I put all the code, you can try if you want. — merve, Sep 03 '13 at 10:20

p:commandButton action has not being called in dynamic pages

3 Answers3