5 Replies Latest reply on Jan 21, 2009 11:36 AM by ilya_shaikovsky

    clear modalPanel form

    swenvogel

      Hi!

      I am new to richfaces and I have a problem with the modalPanel.
      The task is really simple, i want to submit a form from a modal panel to create a new user databse record.
      The inputText controlls are bound to a seam component in event scope (eventUser).
      Everything works fine whren i create the first user, but when i create a seccond user
      and reopen the modalPanel the h:inputText controlls are showing the values from the previus user.

      I want a clean form everytime i open the modal panel.

      Here is the facelets xhtml code (i think the java code is not importent):

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       template="layout/template.xhtml">
      
      <ui:define name="main_content">
      
      
      <rich:modalPanel id="panel" width="350" height="100">
       <f:facet name="header">
      
       <h:panelGroup>
       <h:outputText value="Create new user"></h:outputText>
       </h:panelGroup>
      
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelink"/>
       <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
       </h:panelGroup>
       </f:facet>
      
       <div>
       <h:form>
       <s:decorate template="layout/edit.xhtml">
       <ui:define name="label">Name</ui:define>
       <h:inputText required="true" value="#{eventUser.name}" />
       </s:decorate>
      
       <s:decorate template="layout/edit.xhtml">
       <ui:define name="label">Password</ui:define>
       <h:inputText required="true" value="#{eventUser.password}" />
       </s:decorate>
      
       <h:commandButton action="#{account.addUser(eventUser)}" value="Save" />
       </h:form>
       </div>
      </rich:modalPanel>
      
      
      <rich:tabPanel style="height: 400px;">
      
       <rich:tab label="Common">
       ...
       </rich:tab>
      
       <rich:tab label="Users">
       <h:outputText value="No users exists." rendered="#{empty account.users}"/>
      
       <rich:dataTable var="user" value="#{account.users}" rendered="#{not empty account.users}">
       <rich:column>
       <f:facet name="header">Name</f:facet>
       #{user.name}
       </rich:column>
      
       </rich:dataTable>
      
       <div>
       <h:outputLink value="#" id="link">
       Create User
       <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
       </h:outputLink>
       </div>
      
       </rich:tab>
      
      </ui:composition>
      


      When i change the tab from user to common an back everything works fine.

        • 1. Re: clear modalPanel form
          nbelaevski

          Hello,

          Modal panel is rendered using stored user data. Is it possible to clear name/password fields of eventUser field after successful addition?

          • 2. Re: clear modalPanel form
            swenvogel

            Hello,

            the eventUser object is in the seam event context and does not longer exists after the submisson of the form. I have cheked this with the seam.debug page.

            I think inputText data is stored in the modalPanel itself. I have changed my code like this:

            ...
            <ui:define name="label">Name</ui:define>
            <h:inputText required="true" value="" />
            ...
            <ui:define name="label">Password</ui:define>
            <h:inputText required="true" value="" />
            ...
            


            So there is no seam component and everytime i open the modalPanel change the input text and reopen the old text is redisplayed !

            :-(

            • 3. Re: clear modalPanel form
              ilya_shaikovsky

              so all works as it should in latest snippet. And this is regarded to inputText itself but not to modal panel.

              The input stores its value successfully and encoded using its value. So you should clear the component value from your code in this case. look to demosite sample (dataTable example third tab). There we manage the modal panel inputs in order them to display proper values on every call.

              • 4. Re: clear modalPanel form
                swenvogel

                Hi,

                that's sound quite logically. I looked up the example and i think the key point is to rerender the inputText component in the modalPanel. I tried the following code

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                
                <f:view contentType="text/html" 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:a="http://richfaces.org/a4j"
                 xmlns:s="http://jboss.com/products/seam/taglib"
                 xmlns:rich="http://richfaces.org/rich"
                 xmlns:a4j="http://richfaces.org/a4j">
                
                 <html>
                 <head>
                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                 <title>Test</title>
                 <link rel="shortcut icon" href="#{request.contextPath}/favicon.ico" />
                 <a:loadStyle src="/css/basic.css" />
                 <link href="/css/basic.css" rel="stylesheet" type="text/css" />
                 <link href="/css/theme.css" rel="stylesheet" type="text/css" />
                 </head>
                
                 <body>
                
                 <rich:modalPanel id="testPanel">
                 <f:facet name="header">
                 <h:panelGroup>
                 <h:outputText value="Test Panel"></h:outputText>
                 </h:panelGroup>
                 </f:facet>
                
                 <f:facet name="controls">
                 <h:panelGroup>
                 <h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelink" />
                 <rich:componentControl for="testPanel" attachTo="hidelink" operation="hide" event="onclick" />
                 </h:panelGroup>
                 </f:facet>
                
                 <h:form>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:inputText required="true" value="" id="inputId" />
                
                 <a4j:commandButton value="Save" reRender="inputId" oncomplete="#{rich:component('testPanel')}.hide();" />
                 </a4j:outputPanel>
                 </h:form>
                
                 </rich:modalPanel>
                
                 <rich:panel id="main_panel">
                 <h:form>
                 <a4j:commandLink ajaxSingle="true" id="testLink" value="Create Acount" reRender="inputId" oncomplete="#{rich:component('testPanel')}.show();" />
                 </h:form>
                 </rich:panel>
                
                 </body>
                 </html>
                </f:view>
                
                


                But this also not work !

                • 5. Re: clear modalPanel form
                  ilya_shaikovsky

                  and this will not works. again. check the example at livedemo dataTable sample. There we have almost the same call for the modal and just change the data in action before the modal opened. and in your sample - you just reRender the input but doesn't change its value to the empty you need.