** URGENT - pls suggest Modal panels strange behaviour on fo

[valatharv]

I posted the same on Seam forum, there is no response, may be I should post it here...

Please help, it is very important.... Modal panels strange behaviour on form validation.

I am trying to open modal panel, it works fine when there is NO validation error.

Scenario:
For example if there are duplicate number in text field, I am validating and render the form.

a) At this point, when I click "Update" button, modal pops-up for a second, and error message is displayed on the parent screen.

b) When I click again keeping duplicate number, MODAL does not work and COMPLETE XHTML SCREEN is DISPLAYED TWICE.. :(

c) If I click again after changing to unique number in text fields, MODAL does not pops-up but message is displayed "Your request is in progress, please wait..." on the top-left corner of the browser....

Please suggest what I am doing wrong...

XHTML code:----------

<!DOCTYPE composition 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:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 template="layout/template.xhtml">
 <ui:define name="body">
 <h:messages globalOnly="true" styleClass="message" errorClass="errors" infoClass="info" id="globalMessages"/>
 <div align="center">
 <a:status id="commonstatus" startText="Request In progress... Please wait..." stopText="" startStyleClass="ajaxmessage"/>
 </div>
 <br/>
 <h:form id="quantExperiment" styleClass="edit">
 <ui:repeat value="#{quantExperimentHome.reagentForExp}" var="info" >
 <h:inputText required="true" value="#{info.number}"/>
 ...
 </ui:repeat>
 ...
 <f:subview 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:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <rich:modalPanel id="panel" width="400" height="120">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="In progress..."></h:outputText>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <!--<h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink"/>-->
 <!--<rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>-->
 </h:panelGroup>
 </f:facet>
 <h:outputText styleClass="info" value="Your request is in progress, please wait..."></h:outputText>
 </rich:modalPanel>
 <a4j:commandButton value="Update Experiment" id="update"
 title="Updates the current experiment"
 action="#{quantExperimentHome.update}"
 rendered="#{quantExperimentHome.managed}"
 onclick="this.disabled=true">
 <rich:componentControl for="panel" attachTo="update" operation="show" event="onclick"/>
 </a4j:commandButton>
 <a4j:commandButton id="save" title="Creates new experiment for the existing project"
 value="Save Experiment"
 action="#{quantExperimentHome.persist}"
 disabled="#{!quantExperimentHome.wired}"
 rendered="#{!quantExperimentHome.managed}"
 onclick="this.disabled=true">
 <rich:componentControl for="panel" attachTo="save" operation="show" event="onclick"/>
 </a4j:commandButton>
 </f:subview>
</h:form>

[nbelaevski]

please post full source for both pages.

[valatharv]

Thanks a lot for replying....

I am using modal panel (refer f:subview) in the same xhtml page, below is the complete code. It is invoked on clicking "Update" button.

This works fine when there is no validation error, but if there is any validation error, which is returned from action="#quantExperimentHome.update}", then the issue arises as mentioned in point (b) and (c). Tired and frustated... :(

XHTML:
--------

<!DOCTYPE composition 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:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 template="layout/template.xhtml">
 <ui:define name="body">
 <h:messages globalOnly="true" styleClass="message" errorClass="errors" infoClass="info" id="globalMessages"/>
 <div align="center">
 <a:status id="commonstatus" startText="Request In progress... Please wait..." stopText="" startStyleClass="ajaxmessage"/>
 </div>
 <br/>
 <h:form id="quantExperiment" styleClass="edit">
 <ui:repeat value="#{quantExperimentHome.reagentForExp}" var="info" >
 <h:inputText required="true" value="#{info.number}"/>
 ...
 </ui:repeat>
 ...

 <f:subview 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:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <rich:modalPanel id="panel" width="400" height="120">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="In progress..."></h:outputText>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <!--<h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink"/>-->
 <!--<rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>-->
 </h:panelGroup>
 </f:facet>
 <h:outputText styleClass="info" value="Your request is in progress, please wait..."></h:outputText>
 </rich:modalPanel>

 <a4j:commandButton value="Update Experiment" id="update"
 title="Updates the current experiment"
 action="#{quantExperimentHome.update}"
 rendered="#{quantExperimentHome.managed}"
 onclick="this.disabled=true">
 <rich:componentControl for="panel" attachTo="update" operation="show" event="onclick"/>
 </a4j:commandButton>
 </f:subview>
</h:form>

[nbelaevski]

Ok, I've put your code into the application. Clicking update leads to modal panel get showed and nothing happens more (and there's nothing in the posted code that would close panel). I see request worked as should. RF 3.3.0.GA, IE7/FF3.

[valatharv]

Thanks for taking care of it.

See, if we uncomment "h:graphicImage" and first "rich:componentControl", we will see the close icon, but that is not required, as once processing is complete from update button, I am redirecting to other page.

a) Suppose there is any validation error returned from "quantExperimentHome.update" then I am displaying error message and rendering the xhtml.

b) The problem is when xhtml is rendered on validation error and I click update button again (keeping the error, MODAL does not work and COMPLETE XHTML SCREEN is DISPLAYED TWICE..).

c) If I click again (keeping the error), xhtml is not displayed twice, if I click again xhtml is displayed twice... this behaviour is alternate.

d) If there is no validation error and I click again, MODAL does not pops-up but message is displayed "Your request is in progress, please wait..." on the top-left corner of the browser....

It will be helpful if you try the same thing like your button event should return some error.

Here is quantExperimentHome and xhtml.

quantExperimentHome.java
------------------------
public String update(){
 //DOES SOME VALIDATION IF THERE IS ANY ERROR, it returns error message
 if(something.... wrong){
 return "duplicateColorMessage"; // RETURNS ERROR MESSAGE AND RENDERS THE PAGE FROM PAGES.XML
 }

return super.update();
}

XHTML
--------

<h:form>
....
 <h:inputText required="true" value="#{bean.number}"/>
 .......
<f:subview>
....
 <
rich:modalPanel id="panel"
width="400" height="120">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="In progress..."></h:outputText>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink"/>
 <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
 </h:panelGroup>
 </f:facet>
 <h:outputText styleClass="info" value="Your request is in progress, please wait..."></h:outputText>
 </rich:modalPanel>
......
<a4j:commandButton value="Update Experiment" id="update"
 title="Updates the current experiment"
 action="#{quantExperimentHome.update}"
 rendered="#{quantExperimentHome.managed}"
 onclick="this.disabled=true">
 <rich:componentControl for="panel" attachTo="update" operation="show" event="onclick"/>
 </a4j:commandButton></f:subview>
</h:form>

[nbelaevski]

I still cannot reproduce the issue. Here is the code:

<!DOCTYPE composition 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:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <h:messages globalOnly="true" styleClass="message" errorClass="errors"
 infoClass="info" id="globalMessages" />
 <div align="center"><a:status id="commonstatus"
 startText="Request In progress... Please wait..." stopText=""
 startStyleClass="ajaxmessage" /></div>
 <br />
 <h:form id="quantExperiment" styleClass="edit">
 <ui:repeat value="#{forum5Bean.lotOfData}" var="info">
 <h:inputText required="true" value="#{info}" />
 </ui:repeat>


 <f:subview 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:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <rich:modalPanel id="panel" width="400" height="120">
 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="In progress..."></h:outputText>
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 </h:panelGroup>
 </f:facet>
 <h:outputText styleClass="info"
 value="Your request is in progress, please wait..."></h:outputText>
 </rich:modalPanel>


 <a4j:commandButton value="Update Experiment" id="update" action="#{forum5Bean.toForumY}"
 title="Updates the current experiment" onclick="this.disabled=true">

 <rich:componentControl for="panel" attachTo="update"
 operation="show" event="onclick" />

 </a4j:commandButton>
 </f:subview>

 </h:form>
</ui:composition>

...
 public String toForumY() {
 return "toForumY";
 }
...

<navigation-rule>
 <from-view-id>*</from-view-id>
 <navigation-case>
 <from-outcome>toForumY</from-outcome>
 <to-view-id>/pages/forumY.xhtml</to-view-id>
 <redirect />
 </navigation-case>
 </navigation-rule>

Can you please prepare small runnable example demonstrating the issue?

[valatharv]

Ok I will try...

Do you mean that if "Update " button returns error message then the page is not displayed twice....

[nbelaevski]

"Update" button redirects to the same page again. That's how I understood the case.

[valatharv]

"Update" button renders the same page.... as per navigation rule below.

It is really strange, as we were in urgent need of it, you know if we use h:commandLink then validation, modal pop-up works perfectly fine...

But it will be really helpful, if I can understand why the issue is with a4j:commandButton.

Also h:commandButton produced the following issue.
http://www.seamframework.org/Community/FacingIssueWithSdecorate

<navigation from-action="#{quantExperimentHome.update}">
 <rule if-outcome="duplicateColorMessage">
 <render view-id="/QuantExperimentEdit.xhtml">
 <message severity="error">
 Duplicate color found, please select different color.
 </message>
 </render>
 </rule>
</navigation>

[ilya_shaikovsky]

again.. why you need to use navigation to return to the same page. Why you just can't update some area with info using reRender instead of returning navigation outcome? a4j controls works only with redirect rules.

[valatharv]

Our screen is quiet complex, which contains nested "ui:repeat".
One example : We are checking if two dropdowns in ui:repeat contains same value, then we should not allow the form to submit.

Is it possible, please suggest ?

example:

<ui:repeat value="#{forum5Bean.lotOfData}" var="info">
<h:selectOneMenu value="#{info.color}"
 rendered="#{empty quantExperimentHome.instance.quantitationType}"
 styleClass="message">
 <f:selectItem itemValue="117" itemLabel="117"/>
 <f:selectItem itemValue="116" itemLabel="116"/>
 <f:selectItem itemValue="115" itemLabel="115"/>
 <f:selectItem itemValue="114" itemLabel="114"/>
</h:selectOneMenu>
 <h:inputText required="true" value="#{info}" />
</ui:repeat>

[valatharv]

OK, we are avoiding to use a4j:commandButton as of now, it needs more learning from my side.

Validation, Modal is working with h:commandLink

I was also wondering if I used h:commandButton, it gave validation error to select value in dropdown EVEN IF value was selected.

http://www.seamframework.org/Community/FacingIssueWithSdecorate

[nbelaevski]

"valatharv" wrote:
Our screen is quiet complex, which contains nested "ui:repeat".
One example : We are checking if two dropdowns in ui:repeat contains same value, then we should not allow the form to submit.

Is it possible, please suggest ?

Use form's onsubmit attribute to check this.