1 Reply Latest reply on Jan 16, 2009 4:34 AM by Ilya Shaikovsky

    Richfaces Modal Panel submition problem

    Shekh Md. Morshed Akther Newbie

      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()
      {
      }


      }