action / ActionListener within p:commandButton / p:commandLink not fired - xhtml

Question

I've been read this article : commandButton/commandLink/ajax action/listener method not invoked or input value not updated
but still i cant understand why my problems weren't solved.
i'm afraid that my understanding for the english explanation were not fully correctly. so i'll lay down my code snippets here.
fyi, i'm still got medium level of understanding english. my english capability is just so-so.
i'm using Primefaces 3.0.RC1, EL library 2.2, JSF 2.1, JSTL 1.1, GlassFish 3.x, coded with Netbeans 7.0.1
now here we come the codes:
template.xhtml
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="default.css" library="css"/>
<h:outputStylesheet name="cssLayout.css" library="css"/>
<h:outputStylesheet name="style.css" library="css"/>
<title>MFI Core Banking System</title>
</h:head>
<h:body>
<f:view>
<div id="top">
<ui:include src="header.xhtml"/>
</div>
<div id="menuBar">
<ui:include src="menubar.xhtml"/>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:include src="footer.xhtml"/>
</div>
</f:view>
</h:body>
header.xhtml and footer.xhtml just had UI:Composition declaration and <div/> and <a href/> tag only.
menubar.xhtml as below :
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view>
<h:form>
<p:menubar >
<p:menuitem value="Home" action="/index.xhtml?faces-redirect=true" icon="ui-icon ui-icon-home"/>
<p:submenu label="CIF" icon="ui-icon ui-icon-bookmark">
<p:menuitem value="Manajemen CIF" action="/modul/cif/cifManagement?faces-redirect=true"/>
<p:submenu label="CIF Grouping ">
<p:menuitem value="Search" action="/modul/cif/SearchGroupNew.xhtml?faces-redirect=true"/>
<p:menuitem value="Create" action="/modul/cif/CreateGroupNew.xhtml?faces-redirect=true"/>
</p:submenu>
<p:menuitem value="Analyze" url="#"/>
<p:menuitem value="Directorate " action="/modul/userManagement/Struktural.Directorate.xhtml?faces-redirect=true"/>
</p:submenu>
</p:menubar>
</h:form>
</f:view>
</ui:composition>
this is my example page (Directorate) :
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="./../../template.xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="top">
Directorate
</ui:define>
<ui:define name="menuBar">
menuBar
</ui:define>
<ui:define name="content">
<f:view contentType="text/html">
<h:form prependId="false">
<p:panel toggleable="true" closable="true" header="Direktorat">
<p:fieldset legend="Tambah Direktorat"
toggleable="TRUE"
collapsed="#{directorateBean.fieldsetCollapse}"
toggleSpeed="500"
>
<h:panelGrid columns="3">
<h:outputLabel for="directorateCode" value="Kode Direktorat*"/>
<p:inputText id="directorateCode" value="#{directorateBean.directorate.directoratecode}" required="true" label="Kode Direktorat" maxlength="4"/>
<p:message for="directorateCode"/>
<h:outputLabel for="directorateName" value="Nama Direktorat*"/>
<p:inputText id="directorateName" value="#{directorateBean.directorate.directoratename}" required="true" label="Nama Direktorat" maxlength="40"/>
<p:message for="directorateName"/>
<h:outputLabel for="directorateStatus" value="Status Direktorat"/>
<p:selectOneRadio id="directorateStatus" value="#{directorateBean.directorate.directoratestatus}">
<f:selectItem itemValue="true" itemLabel="Aktif"/>
<f:selectItem itemValue="false" itemLabel="Tidak Aktif"/>
</p:selectOneRadio>
<p:spacer/>
<p:commandButton id="btnSubmitDirectorate" value="Submit" update="#form" action="#{directorateBean.add()}"/>
<p:commandButton value="Reset" type="reset"/>
</h:panelGrid>
</p:fieldset>
<p:spacer/><p:spacer/>
<p:dataTable
id="tableDirectorate"
emptyMessage="Tidak Ada Direktorat"
value="#{directorateBean.directorateList}"
var="dir"
paginator="true"
paginatorPosition="bottom"
rows="10"
rowsPerPageTemplate="10,20,50"
>
<f:facet name="header">Daftar Direktorat</f:facet>
<p:column sortBy="#{dir.directoratecode}" filterBy="#{dir.directoratecode}" filterMatchMode="contains" >
<f:facet name="header"><h:outputText value="Kode Direktorat"/></f:facet>
<h:outputText value="#{dir.directoratecode}"/>
<h:commandLink value="#{dir.directoratecode}" actionListener="#{directorateBean.test}"/>
</p:column>
<p:column sortBy="#{dir.directoratename}" filterBy="#{dir.directoratename}" filterMatchMode="contains" >
<f:facet name="header"><h:outputText value="Nama Direktorat"/></f:facet>
<h:outputText value="#{dir.directoratename}"/>
</p:column>
<p:column style="width: 100px;">
<f:facet name="header"><h:outputText value="Direktorat Status"/></f:facet>
<p:commandButton icon="ui-icon ui-icon-check" title="Active" rendered="#{dir.directoratestatus == true}"/>
<p:commandButton icon="ui-icon ui-icon-closethick" title="Inactive" rendered="#{dir.directoratestatus == false}"/>
</p:column>
<p:column style="width: 100px;">
<p:commandButton icon="ui-icon ui-icon-search" title="View #{dir.directoratename} Details"/>
<p:commandButton icon="ui-icon ui-icon-pencil" title="Edit #{dir.directoratename}" action="#{directorateBean.edit(dir)}" update="panelDetail" oncomplete="updateDlg.show();"/>
<p:commandButton icon="ui-icon ui-icon-trash" title="Delete #{dir.directoratename}"/>
</p:column>
</p:dataTable>
</p:panel>
<p:dialog header="Corfirmation" widgetVar="confirmDialog" resizable="false" id="confirm" showEffect="fade" modal="true" >
<h:outputText value="Confirm Delete ?"/>
<h:panelGrid columns="2">
<p:commandButton value="Cancel" update="#form" />
<p:commandButton value="Delete" update="#form"/>
</h:panelGrid>
</p:dialog>
<p:dialog header="Directorate Detail" widgetVar="updateDlg" resizable="false" id="updateDialog" showEffect="fade" modal="true" >
<h:panelGrid id="panelDetail" columns="3" cellpadding="2">
<h:outputLabel for="editDirectorateCode" value="Kode Direktorat*"/>
<p:inputText id="editDirectorateCode" value="#{directorateBean.selectedDirectorate.directoratecode}" required="true" label="Kode Direktorat" maxlength="4"/>
<p:message for="editDirectorateCode"/>
<h:outputLabel for="editDirectorateName" value="Nama Direktorat*"/>
<p:inputText id="editDirectorateName" value="#{directorateBean.selectedDirectorate.directoratename}" required="true" label="Nama Direktorat" maxlength="40"/>
<p:message for="editDirectorateName"/>
<h:outputLabel for="editDirectorateStatus" value="Status Direktorat"/>
<p:selectOneRadio id="editDirectorateStatus" value="#{directorateBean.selectedDirectorate.directoratestatus}">
<f:selectItem itemValue="true" itemLabel="Aktif"/>
<f:selectItem itemValue="false" itemLabel="Tidak Aktif"/>
</p:selectOneRadio>
<p:spacer/>
<p:commandButton id="btnUpdateDirectorate" value="Simpan" update="#form" action="#{directorateBean.update()}"/>
<p:commandButton value="Reset" type="reset"/>
</h:panelGrid>
</p:dialog>
</h:form>
</f:view>
</ui:define>
<ui:define name="bottom">
bottom
</ui:define>
</ui:composition>
and here is the managed bean :
#ManagedBean(name = "directorateBean")
#ViewScoped
public class structuralDirectorateManagedBean implements Serializable {
private DirectorateDAO directorateService;
/* Initialize variable */
private List<Directorate> directorateList;
private Directorate directorate = new Directorate();
private Directorate selectedDirectorate = new Directorate();
private static final String Creator;
private boolean fieldsetCollapse = true;
private boolean DirectorateStatus = false;
/* init */
#PostConstruct
public void init() throws SQLException {
if (directorateService == null) {
directorateService = FactoryDAO.getDirectorateDAO();
}
directorateList = directorateService.findAll();
directorate.setDirectoratestatus(DirectorateStatus);
directorate.setCreator(Creator);
}
/* Basic Method */
public void add() throws SQLException {
System.out.println("Directorate Code : " + directorate.getDirectoratecode());
directorateService.create(directorate); // insert record to datatabse
directorateList.add(directorate); // insert object to List<Object>
directorate = new Directorate(); // Reset Form
directorate.setDirectoratestatus(DirectorateStatus); // set default
directorate.setCreator(Creator); // set default
}
public void test(){
System.out.println("TEST!!");
}
public void edit(Directorate directorate) {
System.out.println("Directorate code to edit : " + directorate.getDirectoratecode());
this.selectedDirectorate = directorate;
}
public void delete(Directorate directorate) throws SQLException {
directorateService.remove(directorate); // delete record within Database
directorateList.remove(directorate); // delete record within List
}
public void update(ActionEvent event) throws SQLException {
directorateService.edit(selectedDirectorate); // update record to database
selectedDirectorate = new Directorate(); // reset form
}
/** Getter Setter */
public List<Directorate> getDirectorateList() throws SQLException {
return directorateList;
}
public Directorate getDirectorate() {
return directorate;
}
public boolean isFieldsetCollapse() {
return fieldsetCollapse;
}
public void setFieldsetCollapse(boolean fieldsetCollapse) {
this.fieldsetCollapse = fieldsetCollapse;
}
public Directorate getSelectedDirectorate() {
return selectedDirectorate;
}
public void setSelectedDirectorate(Directorate selectedDirectorate) {
this.selectedDirectorate = selectedDirectorate;
}
}
everything runs smooth, displaying record from database, p:selectOneMenu runs well.
this button were runs well too :
<p:commandButton id="btnSubmitDirectorate" value="Submit" update="#form" action="#{directorateBean.add()}"/>
but, this button and commandLink were not working, the Action and ActionListener both not fired :
<p:commandButton icon="ui-icon ui-icon-pencil" title="Edit #{dir.directoratename}" action="#{directorateBean.edit(dir)}" update="panelDetail" oncomplete="updateDlg.show();"/>
<p:commandLink value="#{dir.directoratecode}" actionListener="#{directorateBean.test}"/>
i'm sorry if i'm asking too much, maybe i'm the dumb here.. XD
but i just cannot get over it and just begin to frustated..
thanks for your responds.. :)
have a nice day..

Answer 1

You have one big <h:form> in the "Directorate" view with a lot of different sections. When you invoke an action in one of the sections, then the data of all other sections will also be submitted (and validated!). It look like that you didn't notice those "Value is required" validation messages at first sight because those sections are collapsed/hidden by default.
You need to remove the "God" <h:form> and give the fieldset, the datatable and the two dialogs each its own <h:form>. So you should have 4 separate forms, each with its own responsibility. They can however without problems be bound to the one and same bean.
By the way, the <f:view> does not belong in the include files nor the template clients. There should be only one in the master template.