Richfaces Modal Panel submition problem
Hi,
I am trying to use CRUD example using Richfaces datatable and modal panel. I would like to insert/update a record through modal panel (using JBoss Seam) and delete a record using a4j command link in datatable. I just want to do everything using ajax. Delete operation works fine but when i insert / update a record then the whole page is reloading !!! I would like when user click on submit button of modal window for insert/update datatable would be rerendered, full page must not be reloaded and the modal window just dispose.
Here goes problem in details:
//=========== Web Page==============
<!DOCTYPE composition 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://java.sun.com/jsf/facelets"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/templates/main.xhtml">
<ui:define name="body">
<a4j:region>
<h:form id="frmName">
<rich:panel id="confdivListPanel">
<f:facet name="header"><h:outputText value="#{messages.division} #{messages.list}" styleClass="#{localeSelector.language}textTopMenu"/></f:facet>
<a4j:commandLink value="My Create" action="#{configDivisionAction.create}" onclick="javascript:Richfaces.showModalPanel('editPanel')"
reRender="configDivisionForm">
</a4j:commandLink>
<rich:spacer height="15" />
<rich:dataTable id="configDivisionList" value="#{configDivisionList}" var="confDiv" rows="5" columnClasses="td10,td30,td30,td30" rowKeyVar="row" >
<rich:column filterBy="#{confDiv.divisionName}" filterEvent="onkeyup" rendered="#{localeSelector.language.equalsIgnoreCase('en')}" width="50%" style="text-align:center">
<f:facet name="header">
<h:outputText value="#{messages.division}" styleClass="#{localeSelector.language}FormLabel"/>
</f:facet>
<h:outputText id="enDivisionID" value="#{confDiv.divisionName}" styleClass="#{localeSelector.language}FormLabel"/>
</rich:column>
<rich:column filterBy="#{confDiv.divisionNameBen}" filterEvent="onkeyup" rendered="#{localeSelector.language.equalsIgnoreCase('bg')}" width="50%" style="text-align:center">
<f:facet name="header">
<h:outputText value="#{messages.division}" styleClass="#{localeSelector.language}FormLabel"/>
</f:facet>
<h:outputText id="bgDivisionID" value="#{confDiv.divisionNameBen}" styleClass="#{localeSelector.language}FormLabel"/>
</rich:column>
<rich:column width="50%" style="text-align:center">
<f:facet name="header">
<h:outputText value="#{messages.action}" styleClass="#{localeSelector.language}FormLabel"/>
</f:facet>
<s:link value="#{messages.edit}" action="#{configDivisionAction.details}" styleClass="#{localeSelector.language}FormLabel"/>
<a4j:commandLink ajaxSingle="true" id="editlink" value="My Details"
oncomplete="#{rich:component('editPanel')}.show()" action="#{configDivisionAction.details}" reRender="myModalDiv" >
</a4j:commandLink>
<rich:spacer width="5" />
<a4j:commandLink value="#{messages.delete}" ajaxSingle="true" id="deletelink" oncomplete="#{rich:component('deletePanel')}.show()" action="#{configDivisionAction.delete}" styleClass="#{localeSelector.language}FormLabel"></a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:datascroller id="dscroller" renderIfSinglePage="false" ></rich:datascroller>
</f:facet>
</rich:dataTable>
<rich:spacer height="5"/>
</rich:panel>
</h:form>
</a4j:region>
<rich:modalPanel id="editPanel" autosized="true" width="450">
<s:div id="myModalDiv">
<f:facet name="header">
<h:outputText value="Edit Current Division" styleClass="#{localeSelector.language}FormLabel"/>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png"
id="hidelink" styleClass="hidelink"/>
<rich:componentControl for="editPanel" attachTo="hidelink"
operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<h:form id="configDivisionForm">
<a4j:outputPanel ajaxRendered="true">
<h:panelGrid columns="4">
<h:outputLabel for="divisionName" value="#{messages.divisionEN}" styleClass="#{localeSelector.language}FormLabel" />
<h:outputText value=":" styleClass="colon"/>
<h:inputText id="divisionName" value="#{configDivision.divisionName}" styleClass="inputField"/>
<rich:message for="divisionName" />
<h:outputLabel for="divisionNameBG" value="#{messages.divisionBG}" styleClass="#{localeSelector.language}FormLabel" />
<h:outputText value=":" styleClass="colon"/>
<h:inputText id="divisionNameBG" value="#{configDivision.divisionNameBen}" styleClass="inputField"/>
<rich:message for="divisionNameBG" />
</h:panelGrid>
</a4j:outputPanel>
<a4j:commandButton value="Sumbit"
action="#{configDivisionAction.submit}" reRender="configDivisionList"
oncomplete="#{rich:component('editPanel')}.hide();return false;" />
</h:form>
</s:div>
</rich:modalPanel>
<rich:modalPanel id="deletePanel" autosized="true" width="200">
<f:facet name="header">
<h:outputText value="Delete this division from list?"
style="padding-right:15px;" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png"
styleClass="hidelink" id="hidelink2" />
<rich:componentControl for="deletePanel" attachTo="hidelink2"
operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<h:form>
<a4j:commandButton value="Yes" ajaxSingle="true"
action="#{configDivisionAction.delete}"
oncomplete="#{rich:component('deletePanel')}.hide();"
reRender="configDivisionList" />
<a4j:commandButton value="Cancel"onclick="#{rich:component('deletePanel')}.hide();return false;" />
</h:form>
</rich:modalPanel>
<a4j:status onstart="#{rich:component('wait')}.show()" onstop="#{rich:component('wait')}.hide()"/>
<rich:modalPanel id="wait" autosized="true" width="200" height="120" moveable="false" resizeable="false">
<f:facet name="header">
<h:outputText value="Processing"/>
</f:facet>
<h:outputText value="Wait Please..."/>
</rich:modalPanel>
<rich:messages></rich:messages>
</ui:define>
</ui:composition>
//================================== Entity Bean======================================
import java.io.Serializable;
import java.util.Set;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.persistence.Table;
@Entity
@Table(name="CONFIG_DIVISION")
public class ConfigDivision implements Serializable {
@Id@GeneratedValue
@Column(name="DIVISION_ID")
private long divisionId;
@Column(name="DIVISION_NAME")
private String divisionName;
@Column(name="DIVISION_NAME_BEN")
private String divisionNameBen;
@Column(name="ACTIVATION_STATUS")
private String activationStatus;
@OneToMany(mappedBy="divisionId")
private Set staffProfileCollection;
private static final long serialVersionUID = 1L;
public long getDivisionId() {
return this.divisionId;
}
public void setDivisionId(long divisionId) {
this.divisionId = divisionId;
}
public String getDivisionName() {
return this.divisionName;
}
public void setDivisionName(String divisionName) {
this.divisionName = divisionName;
}
public String getDivisionNameBen() {
return this.divisionNameBen;
}
public void setDivisionNameBen(String divisionNameBen) {
this.divisionNameBen = divisionNameBen;
}
public String getActivationStatus() {
return this.activationStatus;
}
public void setActivationStatus(String activationStatus) {
this.activationStatus = activationStatus;
}
public Set getStaffProfileCollection() {
return this.staffProfileCollection;
}
public void setStaffProfileCollection(Set staffProfileCollection) {
this.staffProfileCollection = staffProfileCollection;
}
}
//=========== Local Interface =============
import javax.ejb.Local;
@Local
public interface ConfigDivisionActionLocal {
public void viewAll();
public String details() ;
public String delete() ;
public String submit() ;
public String create() ;
public String cancel() ;
public void destroy();
}
//=========== Session Bean ==============
import static org.jboss.seam.ScopeType.SESSION;
import static javax.persistence.PersistenceContextType.EXTENDED;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import javax.ejb.Remove;
import javax.ejb.Stateful;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import org.domain.pms.entities.ConfigDivision;
import org.jboss.seam.annotations.Destroy;
import org.jboss.seam.annotations.Factory;
import org.jboss.seam.annotations.In;
import org.jboss.seam.annotations.Logger;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.annotations.Out;
import org.jboss.seam.annotations.Scope;
import org.jboss.seam.annotations.datamodel.DataModel;
import org.jboss.seam.annotations.datamodel.DataModelSelection;
import org.jboss.seam.log.Log;
/**
* Session Bean implementation class ConfigDivisionAction
*/
@Stateful
@Name("configDivisionAction")
@Scope(SESSION)
public class ConfigDivisionAction implements ConfigDivisionActionLocal {
@PersistenceContext(unitName="pms-ejb",type=EXTENDED)
private EntityManager em;
@Logger
private static Log log;
private Set keys = new HashSet();
public void setKeys(Set keys) {
this.keys = keys;
}
public Set getKeys() {
return keys;
}
@DataModel
List configDivisionList;
@DataModelSelection("configDivisionList")
@In(required=false) @Out(required=false)
private ConfigDivision configDivision;
// list all existing Divisions
@Factory("configDivisionList")
public void viewAll() {
System.out.println("entering To execute quary");
configDivisionList = (List)em.createQuery("select div from ConfigDivision div").getResultList();
System.out.println("the list size is"+ configDivisionList.size());
}
// go for Division details
public String details() {
return null;
}
// delete a Division
public String delete() {
try{
log.info("delete division -- >> "+configDivision.getDivisionName());
// update to get rid of java.lang.IllegalArgumentException: Removing a detached instance
em.remove(em.merge(configDivision));
configDivisionList.remove(configDivision);
}catch(Exception e){
log.info("Error at delete method of configDivisionAction "+e);
e.printStackTrace();
}
return null;
}
// add a new Division
public String submit() {
try{
if(configDivision.getDivisionId() > 0)
{
em.merge(configDivision);
}else{
em.persist(configDivision);
}
viewAll();
}catch(Exception e){
log.info("Error at Submit method of configDivisionAction "+e);
}
return "/config/configDivisionList.xhtml";
}
// go for adding a new Division
public String create() {
configDivision = new ConfigDivision();
return null;
//return "/config/configDivisionForm.xhtml";
}
//cancel adding form
public String cancel() {
return "/config/configDivisionList.xhtml";
}
@Destroy @Remove
public void destroy()
{
}
}
