11 Replies Latest reply on Apr 18, 2007 5:45 AM by Marcin M

    Including Form in a Model Panel

    Baiyun Gao Newbie

      I try to including Form and submit buttion in a Model Panel, it appeals that Panel didn't render Form part, it only render plain text.

      included code of model panel

      <rich:modalPanel id="mp" minHeight="400" minWidth="500"
       height="500" width="600" zindex="2000">
       <f:facet name="header">
       <h:outputText value="Close Current Transaction" />
       </f:facet>
       <f:facet name="controls">
       <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
       </f:facet>
      
      
       <p>Any JSF content might be inside the panel. In case of using
       Facelets or JSF 1.2, it might be any mixed content.</p>
      
       <p>The RichFaces modal panel is good with <a4j:include> to create
       a wizard like behavior.</p>
       <p>The model panel is open and closed from the javascript function
       on <i>Richfaces</i> object. The following code
       <a href="javascript:Richfaces.hideModalPanel('mp')">hide this panel</a>:
       Richfaces.hideModalPanel('mp')</p>
      
       <div class="section">
      
       <h:form id="closetx">
       <fieldset>
      
       <s:validateAll>
      
      
       <div class="entry">
       <div class="label"><h:outputLabel for="sirname">Sir Name:</h:outputLabel></div>
       <div class="input">
       <s:decorate>
       <h:inputText id="sirname" value="#{veteran.vetSirName}" required="false"/>
       <br/>
       <h:message for="sirname"/>
       </s:decorate>
       </div>
       </div>
      
       <div class="entry">
       <div class="label"><h:outputLabel for="suffix">Suffix:</h:outputLabel></div>
       <div class="input">
       <s:decorate>
       <h:inputText id="suffix" value="#{veteran.vetSuffix}" required="false"/>
       <br/>
       <h:message for="suffix"/>
       </s:decorate>
       </div>
       </div>
      
       </s:validateAll>
      
       <div class="entry errors">
       <h:messages globalOnly="true"/>
       </div>
      
       <div class="entry">
       <div class="label"> </div>
       <div class="input">
       <h:commandButton id="submitV" value="Submit" action="ViewVeteran"/>
       <s:button id="goto" value="Go to" action="ViewVeteran"/>
       <s:button id="tcancel" value="Cancel" onclick="javascript:Richfaces.hideModalPanel('mp')"/>
       </div>
       </div>
      
       </fieldset>
       </h:form>
      
       </div>
      
      
       </rich:modalPanel>



      If you have any examples, please advise.

      Thanks
      Ben

        • 1. Re: Including Form in a Model Panel
          Marcin M Newbie

          I have similar problem. Anything what's inside <h:form> which belongs to <rich:modalPanel> is not rendered at all:


          <rich:modalPanel id="rest" minHeight="200" minWidth="450"
           height="200" width="500" zindex="2000">
           <f:facet name="header">
           <h:outputText value="Modal Panel Title" />
           </f:facet>
           <f:facet name="controls">
           <a href="javascript:Richfaces.hideModalPanel('rest')">x</a>
           </f:facet>
          
           <h:outputText value="test"/>
           <rich:separator />
           test
          
           <h:form>
           <h:outputText value="test2"/>
           <rich:separator />
           test2
           </h:form>
           <h:outputText value="test3"/>
           <rich:separator />
           test3
          
          
          
           </rich:modalPanel>
          


          Enviroment: Seam 1.2 GA, Facelets, JBoss AS 4.0.5 GA

          btw - why modalPanel is not included in the documentation?

          • 2. Re: Including Form in a Model Panel
            Sergey Smirnov Master

            it is included, but is not mentioned in the left menu.
            http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/modalPanel.html

            We told about h:form as a direct child of modalPanel (as well as rich:panel) earlier here.

            It was a bug - RF-5
            http://jira.jboss.com/jira/browse/RF-5
            Fixed in SVN several days ago. Fix will be included in the 3.0.1. You can download and try nightly build anytime.

            • 3. Re: Including Form in a Model Panel
              Marcin M Newbie

              I didn't have time to check then, so I did it today's morning.

              I used the latest (17042007) snapshot of Richfaces 3.0.1, I have also read that modalPanel must include a form tag. So I did.

              First atempt:

              <rich:modalPanel id="addUsers" minHeight="200" minWidth="450"
               height="200" width="500" zindex="2000">
               <a4j:form>
               <f:facet name="header">
               <h:outputText value="Modal Panel Title" />
               </f:facet>
               <f:facet name="controls">
               <a href="javascript:Richfaces.hideModalPanel('addUsers')">x</a>
               </f:facet>
               <h:inputText rows="15" width="300" id="search_field" value="#{usersManager.searchQueryString}">
               <a4j:support event="onkeyup" actionListener="#{usersManager.onKeyUp}" />
               </h:inputText>
               </a4j:form>
              </rich:modalPanel>
              
              


              the popup is empty.

              second atempt:
              <rich:modalPanel id="addUsers" minHeight="200" minWidth="450"
               height="200" width="500" zindex="2000">
               <f:facet name="header">
               <h:outputText value="Modal Panel Title" />
               </f:facet>
               <f:facet name="controls">
               <a href="javascript:Richfaces.hideModalPanel('addUsers')">x</a>
               </f:facet>
               <a4j:form>
               <h:inputText rows="15" width="300" id="search_field" value="#{usersManager.searchQueryString}">
               <a4j:support event="onkeyup" actionListener="#{usersManager.onKeyUp}" />
               </h:inputText>
               </a4j:form>
              </rich:modalPanel>
              

              The header and controls are rendered, the inputText is not.

              So, third atempt
              <a4j:form>
               <rich:modalPanel id="addUsers" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
               <f:facet name="header">
               <h:outputText value="Modal Panel Title" />
               </f:facet>
               <f:facet name="controls">
               <a href="javascript:Richfaces.hideModalPanel('addUsers')">x</a>
               </f:facet>
              
               <h:inputText rows="15" width="300" id="search_field" value="#{usersManager.searchQueryString}">
               <a4j:support event="onkeyup" actionListener="#{usersManager.onKeyUp}" />
               </h:inputText>
               </rich:modalPanel>
              </a4j:form>
              


              everything looks fine, the inputText is rendered, the actionListener is trigged up, but the searchQueryString always remains null. Anyone knows why?

              my environment: Facelets, Seam 1.2, the mentioned snapshot of richfaces and Ajax4jsf-1.1.0.

              An interface to the bean
              @Local
              public interface UsersManager {
               public void destroy();
               public void onKeyUp();
               public String getSearchQueryString();
               public void setSearchQueryString(String searchQueryString);
              
              }
              


              The bean
              @Stateful
              @Name("usersManager")
              @Scope(ScopeType.CONVERSATION)
              public class UsersManagerAction extends AbstractManagerAction implements
               UsersManager {
              
               private static final long serialVersionUID = 1L;
              
               protected String searchQueryString;
              
              
               protected String searchPattern = "%";
              
               public String getSearchQueryString() {
               return searchQueryString;
               }
              
               public void setSearchQueryString(String searchQueryString) {
               this.searchQueryString = searchQueryString;
               }
              
               public void destroy() {
               }
              
               public void onKeyUp() {
              
               //this is always null
               System.out.println(searchQueryString);
              
               }
              
              }
              


              • 4. Re: Including Form in a Model Panel
                Alexander Belov Novice

                I can say that the one right variant is the second.

                Please, try to use h:form.

                • 5. Re: Including Form in a Model Panel
                  Marcin M Newbie

                   

                  "AlexanderBelov" wrote:
                  I can say that the one right variant is the second.

                  Please, try to use h:form.


                  thanks for the reply. I followed your advice but still, without success:

                  <!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:s="http://jboss.com/products/seam/taglib"
                   xmlns:ui="http://java.sun.com/jsf/facelets"
                   xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                   xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
                   <body>
                   <a
                   href="javascript:Richfaces.showModalPanel('addUsers',{width:850, top:200})">
                   <img src="Images/add_icon.gif" alt="" /> #{messages.wizardAddPopup}
                   </a>
                   <rich:modalPanel id="addUsers" minHeight="200" minWidth="450"
                   height="200" width="500" zindex="2000">
                   <h:form>
                   <f:facet name="header">
                   <h:outputText value="Modal Panel Title" />
                   </f:facet>
                   <f:facet name="controls">
                   <a href="javascript:Richfaces.hideModalPanel('addUsers')">x</a>
                   </f:facet>
                  
                   <h:inputText rows="15" width="300" id="search_field"
                   value="#{usersManager.searchQueryString}">
                   <a4j:support event="onkeyup"
                   actionListener="#{usersManager.onKeyUp}" reRender="searchResults" />
                   </h:inputText>
                  
                   </h:form>
                   </rich:modalPanel>
                   </body>
                  </html>
                  
                  


                  the body of modal Panel is empty.

                  • 6. Re: Including Form in a Model Panel
                    Alexander Belov Novice

                    The second, not first.

                    Facets must have modalPanel component as parent.

                    • 7. Re: Including Form in a Model Panel
                      Marcin M Newbie

                      excuse me, silly me.

                      <!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:s="http://jboss.com/products/seam/taglib"
                       xmlns:ui="http://java.sun.com/jsf/facelets"
                       xmlns:f="http://java.sun.com/jsf/core"
                       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                       xmlns:h="http://java.sun.com/jsf/html"
                       xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
                       <body>
                       <a
                       href="javascript:Richfaces.showModalPanel('addUsers',{width:850, top:200})">
                       <img src="Images/add_icon.gif" alt="" /> #{messages.wizardAddPopup}
                       </a>
                       <rich:modalPanel id="addUsers" minHeight="200" minWidth="450"
                       height="200" width="500" zindex="2000">
                      
                       <f:facet name="header">
                       <h:outputText value="Modal Panel Title" />
                       </f:facet>
                       <f:facet name="controls">
                       <a href="javascript:Richfaces.hideModalPanel('addUsers')">x</a>
                       </f:facet>
                       <h:form>
                       <h:inputText rows="15" width="300" id="search_field"
                       value="#{usersManager.searchQueryString}">
                       <a4j:support event="onkeyup"
                       actionListener="#{usersManager.onKeyUp}" reRender="searchResults" />
                       </h:inputText>
                       </h:form>
                       </rich:modalPanel>
                       </body>
                      </html>
                      


                      but still, the problem remains.

                      tested on mozilla, firefox 2.0, opera 9.02 [all on Linux].

                      any ideas?

                      • 8. Re: Including Form in a Model Panel
                        Alexander Belov Novice

                        Is any error in log files?

                        • 9. Re: Including Form in a Model Panel
                          Marcin M Newbie

                           

                          "AlexanderBelov" wrote:
                          Is any error in log files?


                          nope.

                          is there any example of working modalPanel with a included form?

                          Can someone provide an example?



                          • 10. Re: Including Form in a Model Panel
                            Nick Belaevski Master

                            Hello!

                            The problem is reproducing at my site with ajax4jsf 1.1.0 version. Looks like internal filter ajax4jsf issue. So I've switched to 1.1.1-SNAPSHOT version and that fixed the problem. Can you please try?

                            • 11. Re: Including Form in a Model Panel
                              Marcin M Newbie

                               

                              "nbelaevski" wrote:
                              Hello!

                              The problem is reproducing at my site with ajax4jsf 1.1.0 version. Looks like internal filter ajax4jsf issue. So I've switched to 1.1.1-SNAPSHOT version and that fixed the problem. Can you please try?


                              it helped, thank you.