1 Reply Latest reply on Jan 11, 2008 11:43 AM by Deibys Quintero

    AJAX Forms

    Deibys Quintero Newbie

      Hola !

      I am trying to make a web application completely based on AJAX requests, suported by Ricachfaces Framework

      I am form for "creating an item" , in my database , I when I press submit button it is created , but it should navigate to another page , which it does not...and I dont know why..... It is configured correctly in my faces-config.xml file.

      This is the index.jsp file, where my form is included, please see red coloured code

      <%--
       Document : template
       Created on : 2/01/2008, 07:43:57 AM
       Author : Deibys
      --%>
      
      <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
      <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
      
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
      
      <html>
      <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>JSP Page</title>
       <style type="text/css">
       body,
       html {
       margin:20;
       padding:0;
       }
       body {
       min-width:800px;
       }
       #wrap {
       margin:0 auto;
       width:1024px;
       }
       #main {
       float:right;
       width:750px;
       }
       #sidebar {
       float:left;
       width:250px;
       }
       #footer {
       background:#cc9;
       clear:both;
       }
       #footer p {
       padding:5px;
       margin:0;
       }
       </style>
      </head>
      <body>
       <f:view>
       <div id="header">
       <rich:toolBar>
       <rich:toolBarGroup>
       <h:outputText value="Bienvenido #{UserBean.userName} !" />
       </rich:toolBarGroup>
       <rich:toolBarGroup location="right">
       <h:form id="logoutForm" >
       <h:commandLink id="logout" action="#{LoginManager.logout}" >
       <h:outputText value="Salir" />
       </h:commandLink>
       </h:form>
       </rich:toolBarGroup>
       </rich:toolBar>
       </div>
       <rich:spacer width="1" height="10" />
       <div id="main">
       <a4j:outputPanel id="main2" >
       <div><h2><h:outputText value="#{MenuBean.nodeSelectedTitle}" /></h2></div>
       <a4j:include viewId="#{MenuBean.optionSelectedUrl}" />
       </a4j:outputPanel>
       </div>
       <div id="sidebar">
       <rich:panel>
       <h:form>
       <rich:tree switchType="client" value="#{MenuBean.treeNode}" var="item" id="navigationMenu"
       iconLeaf="/images/gear.gif" iconCollapsed="/images/tree_folder_close.gif"
       iconExpanded="/images/tree_folder_open.gif" icon="false"
       preserveModel="state" ajaxSubmitSelection="true" reRender="main2"
       nodeSelectListener="#{MenuBean.processSelection}" >
      
       <rich:treeNode >
       <h:outputText value="#{item.title}" />
       </rich:treeNode>
       </rich:tree>
       </h:form>
       </rich:panel>
       </div>
       <rich:spacer width="1" height="10" />
       <div id="footer">
       <p>@Copyright 2008</p>
       </div>
       </f:view>
      </body>
      </html>
      


      My form is createArea.jsp

      <%--
       Document : createArea
       Created on : 8/01/2008, 03:35:09 PM
       Author : Deibys
      --%>
      <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
      <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
      
      <h:form id="createAreaForm" >
       <rich:messages />
       <h:panelGrid columns="2" cellspacing="5" >
       <h:outputLabel value="Area" for="area" />
       <h:inputText id="area" required="true" value="#{AreaBean.areaName}" />
       <h:outputLabel value="Estado" for="status" />
       <h:selectOneMenu value="#{AreaBean.status}" id="status">
       <f:selectItem itemLabel="Activo" itemValue="A" />
       <f:selectItem itemLabel="Inactivo" itemValue="I" />
       </h:selectOneMenu>
      
       <a4j:commandButton value="Crear >>" action="#{AreaBean.create}" />
       </h:panelGrid>
      </h:form>
      
      


      And the page it should navigate to, when clicked on " Crear >>" button is (editArea.jsp)

      <%--
      Document : editArea
      Created on : 10/01/2008, 02:27:31 PM
      Author : Deibys
      --%>

      <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
      <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>

      <h:form id="editAreaForm" >
      <rich:messages />
      <h:panelGrid columns="2" cellspacing="5" >
      <h:inputHidden id="id" value="#{AreaBean.areaId}" />
      <h:outputLabel value="Area" for="area" />
      <h:inputText id="area" required="true" value="#{AreaBean.areaName}" disabled="true" />
      <h:outputLabel value="Estado" for="status" />
      <h:selectOneMenu value="#{AreaBean.status}" id="status">
      <f:selectItem itemLabel="Activo" itemValue="A" />
      <f:selectItem itemLabel="Inactivo" itemValue="I" />
      </h:selectOneMenu>

      <a4j:commandButton value="Editar >>" action="#{AreaBean.edit}" />
      </h:panelGrid>
      </h:form>

      my AreaBean code is :

      /*
       * To change this template, choose Tools | Templates
       * and open the template in the editor.
       */
      
      package com.coorserpark.backing;
      
      import com.coorserpark.model.Area;
      
      import javax.faces.application.FacesMessage;
      import javax.faces.context.FacesContext;
      
      
      
      /**
       *
       * @author Deibys
       */
      public class CreateAreaBean {
      
       private long areaId;
       private String areaName;
       private String status;
       private boolean editMode;
      
       public long getAreaId() {
       return areaId;
       }
      
       public void setAreaId(long areaId) {
       this.areaId = areaId;
       }
      
       public String getAreaName() {
       return areaName;
       }
      
       public void setAreaName(String areaName) {
       this.areaName = areaName;
       }
      
       public String getStatus() {
       return status;
       }
      
       public void setStatus(String status) {
       this.status = status;
       }
      
       public String create() throws Exception {
      
       try {
      
       FacesContext fc = FacesContext.getCurrentInstance();
       long areaId = Area.createArea(areaName, status);
       if (areaId > 0) {
       // add
       fc.addMessage(null, new FacesMessage("Area Creada Exitosamente",null));
       this.areaId = areaId;
       return "success";
       } else {
       return "failure";
       }
      
       } catch (Exception e) {
       throw new Exception(e);
       }
      
       //return null;
      
       }
      
       public String edit() {
      
       try {
      
       FacesContext fc = FacesContext.getCurrentInstance();
      
       Area area = new Area();
      
       area.setAreaId(areaId);
       area.setAreaName(areaName);
       area.setStatus(status);
      
       if (area.editArea()) {
       // add
       fc.addMessage(null, new FacesMessage("Area Modificada Exitosamente",null));
       return "success";
       } else {
       return "failure";
       }
      
       } catch (Exception e) {
       // Throw CreateUser Exception or Custom Gambatte Exception
       }
      
       return null;
      
       }
      
      }
      
      My faces-config.xml: is
      <?xml version='1.0' encoding='UTF-8'?>
      
      
      <!DOCTYPE faces-config PUBLIC
       "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
       "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
      
      <!-- =========== FULL CONFIGURATION FILE ================================== -->
      
      <faces-config>
       <managed-bean>
       <managed-bean-name>AreaBean</managed-bean-name>
       <managed-bean-class>com.coorserpark.backing.CreateAreaBean</managed-bean-class>
       <managed-bean-scope>request</managed-bean-scope>
       </managed-bean>
       <navigation-rule>
       <from-view-id>/Administracion/createArea.jsp</from-view-id>
       <navigation-case>
       <from-outcome>success</from-outcome>
       <to-view-id>/Administracion/editArea.jsp</to-view-id>
       </navigation-case>
       </navigation-rule>
      </faces-config>
      
      
      
      


      What's wrong ? When I click submit , page does not navigate....Message is display, in the same page I click on submit


        • 1. Re: AJAX Forms
          Deibys Quintero Newbie

          Hello Guys !

          Any hint ? Playing with the code , I made a small change and now it works

          I changed this.. :

          <div id="main">
           <a4j:outputPanel id="main2" >
           <div><h2><h:outputText value="#{MenuBean.nodeSelectedTitle}" /></h2></div>
           <a4j:include viewId="#{MenuBean.optionSelectedUrl}" />
           </a4j:outputPanel>
           </div>


          to:
          <div id="main">
           <a4j:outputPanel id="main2" >
           <div><h2><h:outputText value="#{MenuBean.nodeSelectedTitle}" /></h2></div>
           <a4j:include viewId="/Admininstracion/createArea.jsp" />
           </a4j:outputPanel>
           </div>



          But I need the content of "main div" to be loaded dynamically based on the clicks I do on a rich:tree based menu....


          Does anyone know how I could make it ? I mean to display the contents dynamycally and at the same time in that content have my multi-step ajax form.... All is done by ajax ..even the clicks on the Tree Menu

          Any example code would be appreciated :)

          Best regards, deibys