I created a CRUD operation with JSF and PrimeFaces 6 and EJB 3.1. The findAll() method works very fine because I can see the the fetched data List on the PrimeFaces DataTable. But when i click on Add, the popup shows up, but submiting the data to the managedbean does not work, i can see that, the command button does not seem to communicate with the bean. But the same code is working in another module of the same project. I keep wondering why this problem is occurring. I have tried all solutions such as Ajax="false", I have tried process="@this", I have also tried immediate="true", but nothing seems working. I have been stranded and need a solution. Thanks
THIS IS THE XHTML FILE
<?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://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:body>
<div>
<h:form id="subjectTopForm">
<p:growl id="growl" life="2000" />
<p:commandLink id="ajax" update="growl" onclick="PF('subjectAddDialog').show();">
<span class="btn waves-effect waves-light indigo">
<h:outputText value="Add new Subject"/>
</span>
</p:commandLink>
<!-- <BEGINNING OF SAVE POPUP DIALOG>-->
<p:dialog header="Add New Subject" widgetVar="subjectAddDialog" modal="true" height="auto" width="420" styleClass="customDialog">
<f:view>
<p:panelGrid columns="2">
<p:outputLabel value="SubjectName:" for="subjectName" class="table-row-height" />
<p:inputText id="subjectName" value="#{subject.sub.subjectName}" title="SubjectName" required="true" requiredMessage="The SubjectName field is required." />
<p:outputLabel/>
<p:commandButton process="@this" immediate="true" action="#{subject.addSubject()}" value="Add Subject" update=":subjectForm">
<f:ajax execute="subjectForm" render="subjectForm:subjectDataTable" />
<p:resetInput target=":subjectForm"/>
</p:commandButton>
</p:panelGrid>
</f:view>
</p:dialog>
<!-- END OF SAVE POPUP DIALOG-->
</h:form>
</div>
<div>
<h:form id="editSubjectPopupDialog">
<!-- UPDATE FORM DIALOG-->
<p:dialog header="Edit Subject" widgetVar="subjectEditDiaglog" modal="true" height="auto" width="420" styleClass="customDialog">
<f:view>
<p:panelGrid columns="2">
<p:outputLabel value="SubjectName:" for="subjectName" class="table-row-height" />
<p:inputText id="subjectName" value="#{subject.sub.subjectName}" title="SubjectName" required="true" requiredMessage="The SubjectName field is required." />
<p:outputLabel/>
<p:commandButton action="#{subject.editSubject()}" value="Save Changes" update=":editSubjectPopupDialog">
<f:ajax execute="subjectForm" render="subjectForm:subjectDataTable" />
<p:resetInput target=":editSubjectPopupDialog"/>
</p:commandButton>
</p:panelGrid>
</f:view>
</p:dialog>
<!--END OF UPDATE FORM DIALOG-->
</h:form>
</div>
<div>
<f:view>
<h:form id="subjectForm">
<h:dataTable value="#{subject.findAll()}" var="item" id="subjectDataTable">
<h:column>
<f:facet name="header">
<h:outputText value="SubjectName"/>
</f:facet>
<h:outputText value="#{item.subjectName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Edit"/>
</f:facet>
<p:commandLink action="#{subject.setSub(item)}" oncomplete="PF('subjectEditDiaglog').show()" update=":editSubjectPopupDialog">
<i class="mdi-editor-mode-edit">
</i>
</p:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Delete"/>
</f:facet>
<h:commandLink action="#{subject.delete(item)}" onclick="return confirm('Are you sure?')">
<i class="mdi-action-delete">
</i>
<f:ajax render="subjectForm:subjectDataTable" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</div>
<div>
<p>
</p>
<p>
</p>
</div>
</h:body>
</html>
BELOW IS THE JSF MANAGED BEAN
package com.nan.app.controller;
import com.nan.app.crud.entityclasses.Subjects;
import com.nan.app.crud.sessionbeans.SubjectService;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
/**
*
* @author Nandom
*/
@ManagedBean(name = "subject")
@SessionScoped
public class SubjectController implements Serializable {
@EJB
SubjectService service;
private Subjects sub = new Subjects();
public Subjects getSub() {
return sub;
}
public void setSub(Subjects sub) {
this.sub = sub;
}
public void addSubject() {
service.create(sub);
service.findAll();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, sub.getSubjectName(), null);
FacesContext.getCurrentInstance().addMessage(null, message);
sub = new Subjects();
}
public void editSubject() {
service.edit(sub);
service.findAll();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Update Executed Successfully", null);
FacesContext.getCurrentInstance().addMessage(null, message);
sub = new Subjects();
}
public void delete(Subjects entity) {
service.remove(entity);
service.findAll();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Deleted Successfully", null);
FacesContext.getCurrentInstance().addMessage(null, message);
}
public Subjects find(Object id) {
return service.find(id);
}
public List<Subjects> findAll() {
return service.findAll();
}
}
Pls NOTE: I have a side navigation in my mail-layout.xhtml which the links are controlled by the navigation bean as shown below.
Main Application UI with Side Navigation THE CODE FOR THIS LAYOUT IS BELOW
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. "/>
<meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,"/>
<title>School Management System</title>
<!-- Favicons-->
<link rel="icon" href="#{resource['images/favicon/favicon-32x32.png']}" sizes="32x32"/>
<!-- Favicons-->
<link rel="apple-touch-icon-precomposed" href="#{resource['images/favicon/apple-touch-icon-152x152.png']}"/>
<!-- For iPhone -->
<meta name="msapplication-TileColor" content="#00bcd4"/>
<meta name="msapplication-TileImage" content="#{resource['images/favicon/mstile-144x144.png']}"/>
<!-- For Windows Phone -->
<link href="#{resource['css/widget.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- CORE CSS-->
<link href="#{resource['css/materialize.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['css/style.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- Custome CSS-->
<link href="#{resource['css/custom/custom.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
<link href="#{resource['js/plugins/prism/prism.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['js/plugins/perfect-scrollbar/perfect-scrollbar.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['js/plugins/chartist-js/chartist.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['js/plugins/data-tables/css/jquery.dataTables.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<style>
.mdi-action-delete {
font-size: 25px;
}
.mdi-editor-mode-edit {
font-size: 25px;
}
.addForm {
display:inline-block;
width: 300px;
text-wrap:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.table-row-height {
height:30px;
}
</style>
</h:head>
<h:body>
<!-- Start Page Loading -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START HEADER -->
<header id="header" class="page-topbar">
<!-- start header nav-->
<div class="navbar-fixed">
<nav class="navbar-color">
<div class="nav-wrapper">
<ul class="left">
<li><h1 class="logo-wrapper"><a href="index.html" class="brand-logo darken-1"><img src="#{resource['images/materialize-logo.png']}" alt="materialize logo"/></a> <span class="logo-text">Materialize</span></h1></li>
</ul>
<div class="header-search-wrapper hide-on-med-and-down">
<i class="mdi-action-search"></i>
<input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize"/>
</div>
<ul class="right hide-on-med-and-down">
<li><a href="javascript:void(0);" class="waves-effect waves-block waves-light translation-button" data-activates="translation-dropdown"><img src="#{resource['images/flag-icons/United-States.png']}" alt="USA" /></a>
</li>
<li><a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen"><i class="mdi-action-settings-overscan"></i></a>
</li>
<li><a href="javascript:void(0);" class="waves-effect waves-block waves-light notification-button" data-activates="notifications-dropdown"><i class="mdi-social-notifications"><small class="notification-badge">5</small></i>
</a>
</li>
<li><a href="#" data-activates="chat-out" class="waves-effect waves-block waves-light chat-collapse"><i class="mdi-communication-chat"></i></a>
</li>
</ul>
<!-- translation-button -->
<ul id="translation-dropdown" class="dropdown-content">
<li>
<a href="#!"><img src=" #{resource['images/flag-icons/United-States.png']}" alt="English" /> <span class="language-select">English</span></a>
</li>
</ul>
<!-- notifications-dropdown -->
<ul id="notifications-dropdown" class="dropdown-content">
<li>
<h5>NOTIFICATIONS <span class="new badge">5</span></h5>
</li>
<li class="divider"></li>
<li>
<a href="#!"><i class="mdi-action-add-shopping-cart"></i> A new order has been placed!</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
</li>
</ul>
</div>
</nav>
</div>
<!-- end header nav-->
</header>
<!-- END HEADER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START MAIN -->
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<!-- START LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<li class="user-details cyan darken-2">
<div class="row">
<div class="col col s4 m4 l4">
<img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image"/>
</div>
<div class="col col s8 m8 l8">
<ul id="profile-dropdown" class="dropdown-content">
<li><a href="#"><i class="mdi-action-face-unlock"></i> Profile</a>
</li>
<li><a href="#"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
</li>
</ul>
<a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#" data-activates="profile-dropdown">John Doe<i class="mdi-navigation-arrow-drop-down right"></i></a>
<p class="user-roal">Administrator</p>
</div>
</div>
</li>
<li class="bold"><a href="index.html" class="waves-effect waves-cyan"><i class="mdi-action-dashboard"></i> Dashboard</a>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-view-carousel"></i> Settings</a>
<div class="collapsible-body">
<ul>
<h:form style="width:400px; margin-left:-20px;">
<f:ajax render=":content" >
<li><h:commandLink value="Register Classes" action="#{navigation.setPage('/pages/RegisterClasses.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Register Subjects" action="#{navigation.setPage('/pages/RegisterSubjects.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Register Teachers" action="#{navigation.setPage('/pages/RegisterTeachers.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Assign Form Teachers" action="#{navigation.setPage('/pages/AssignFormTeachers.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Assign Subject Teachers" action="#{navigation.setPage('/pages/AssignSubjectTeachers.xhtml')}" class="mdi-action-dashboard" /></li>
</f:ajax>
</h:form>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i class="mdi-navigation-menu"></i></a>
</aside>
<!-- END LEFT SIDEBAR NAV-->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START CONTENT -->
<section>
<!--start container-->
<div class="container">
<div class="divider"></div>
<ui:insert name="content">
</ui:insert>
<!-- Floating Action Button -->
<div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
<a class="btn-floating btn-large">
<i class="mdi-action-stars"></i>
</a>
<ul>
<li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a></li>
<li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a></li>
<li><a href="app-calendar.html" class="btn-floating green"><i class="large mdi-editor-insert-invitation"></i></a></li>
<li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
</ul>
</div>
<!-- Floating Action Button -->
</div>
<!--end container-->
</section>
<!-- END CONTENT -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START RIGHT SIDEBAR NAV-->
<aside id="right-sidebar-nav">
<ul id="chat-out" class="side-nav rightside-navigation">
<li class="li-hover">
<a href="#" data-activates="chat-out" class="chat-close-collapse right"><i class="mdi-navigation-close"></i></a>
<div id="right-search" class="row">
<form class="col s12">
<div class="input-field">
<i class="mdi-action-search prefix"></i>
<input id="icon_prefix" type="text" class="validate"/>
<label for="icon_prefix">Search</label>
</div>
</form>
</div>
</li>
</ul>
</aside>
<!-- LEFT RIGHT SIDEBAR NAV-->
</div>
<!-- END WRAPPER -->
</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
<span>Copyright © 2015 <a class="grey-text text-lighten-4" href="" target="_blank">Nandom Gusen</a> All rights reserved.</span>
<span class="right"> Design and Developed by <a class="grey-text text-lighten-4" href="">Nandom Gusen</a></span>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- ================================================
Scripts
================================================ -->
<!-- jQuery Library -->
<!-- <script type="text/javascript" src="#{resource['js/plugins/jquery-1.11.2.min.js']}"></script> -->
<!--materialize js-->
<script type="text/javascript" src="#{resource['js/materialize.min.js']}"></script>
<!--prism-->
<script type="text/javascript" src=" #{resource['js/plugins/prism/prism.js']}"></script>
<!--scrollbar-->
<script type="text/javascript" src="#{resource['js/plugins/perfect-scrollbar/perfect-scrollbar.min.js']}"></script>
<!-- chartist -->
<script type="text/javascript" src="#{resource['js/plugins/chartist-js/chartist.min.js']}"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="#{resource['js/plugins.min.js']}"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="#{resource['js/custom-script.js']}"></script>
<script type="text/javascript" src=" #{resource['js/plugins/data-tables/js/jquery.dataTables.min.js']}"></script>
<script type="text/javascript" src="#{resource['js/plugins/data-tables/data-tables-script.js']}"></script>
<script type="text/javascript">
/*Show entries on click hide*/
$(document).ready(function () {
$(".dropdown-content.select-dropdown li").on("click", function () {
var that = this;
setTimeout(function () {
if ($(that).parent().hasClass('active')) {
$(that).parent().removeClass('active');
$(that).parent().hide();
}
}, 100);
});
});
</script>
</h:body>
</html>
BELOW IS THE NAGIVATION BEAN
package com.nan.app.navigation;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
/**
*
* @author Nandom
*/
@ManagedBean(name = "navigation")
public class NavigationBean implements Serializable {
public static final long serialVersionUID = 1L;
public String page;
@PostConstruct
public void init() {
page = "/pages/RegisterClasses.xhtml"; // Default include.
// page = "/template/default/content-layout.xhtml?";
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
This application works well, but the first view(RegisterClassex.xhtml) is the view that will work well. Other views like RegisterSubject.xhtml will not be able to communicate with its own bean.
What could be the problem?
