Including Form in a Model Panel

[bengao]

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

[kot.filemon]

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?

[sergeysmirnov]

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.

[kot.filemon]

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);

 }

}

[alexanderbelov]

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

Please, try to use h:form.

[kot.filemon]

"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.

[alexanderbelov]

The second, not first.

Facets must have modalPanel component as parent.

[kot.filemon]

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?

[alexanderbelov]

Is any error in log files?

[kot.filemon]

"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?

[nbelaevski]

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?

[kot.filemon]

"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.