Variant to wiki example on validation in modal panel

[ylazzari]

Hi,

I just wanted to share a variant to the following wiki article (http://labs.jboss.com/wiki/ModalPanelValidation) that explains how to prevent a modal panel from closing when there's at least one error in the message queue. Perhaps someone else already thought of this but here it is anyways. By the way, this assumes that you are using facelets but I'm sure an equivalent is possible with JSP pages as well.

All my facelets templates share a common template. So, they all look something like this:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
 xmlns:h="http://java.sun.com/jsf/html"
 template="../templates/default.xhtml">
...
</ui:composition>

In my default.xhtml template, I added the following:

 <a4j:outputPanel ajaxRendered="true">
 <h:form style="display:none" prependId="false">
 <h:inputHidden id="maximumSeverity" value="#{facesContext.maximumSeverity.ordinal}"/>
 </h:form>
 </a4j:outputPanel>

Basically, we now have an invisible form that gets refreshed on every postback and contains a hidden field that tells us the maximum severity in the message queue, or null if the queue is empty.

Next, I have a little utility javascript method like this:

function ajaxRequestContainsErrors() {
 return document.getElementById("maximumSeverity").value == "2";
}

This method simply reads the value of the hidden field and tests if its equal to the ERROR severity ordinal value.

Since all of this is done in my base template, every facelet client file can now use this little javascript method to see if the last postback to the server generated any errors.

Finally, the a4j:commandLink or a4j:commandButton that submits a form from within a modal panel can now look like this:

<a4j:commandButton value="Save" action="#{myController.save}" oncomplete="if (!ajaxRequestContainsErrors()) Richfaces.hideModalPanel('myModalPanelId');"/>

It might not seem like a big difference with the proposed solution in the wiki but I like the idea of having this javascript method available at any moment in any of my pages. It makes it easier to adjust the behaviour of any javascript code based on the fact that there were errors or not. Plus, it might be because I'm picky but I think it makes more sense to test the value of a hidden field rather than seeing if a given element is present in the DOM or not because we know that it shouldn't be there when there are no error. It would also be very easy to have other javascript methods that test if we have at least one info or one warning message.

So that's it. That's my 2 cents. Maybe someone will find this useful.

[sergeysmirnov]

I have added the link from the article to this post

[whitty69]

I have just started with JSF etc and I found this tip really helpful. I added the idea almost as is with only one difference. I didn't really like th if .. in the oncommit so I made two scripts, one as above and another one that takes the panelId that should be hidden if valid.

 ....oncomplete="closeModalPanel('myPanelId')" ....
 function ajaxRequestContainsErrors() {
 return document.getElementById("maximumSeverity").value == "2";
 }

 function closeModalPanel(panelId) {
 if (!ajaxRequestContainsErrors()) Richfaces.hideModalPanel(panelId);
 }

Just thought I'd share.

Thanks for a really good tip.

Peter.

[chrisachilli]

thanks, both were very usefull to me.

[barbarab]

Hello

I'm not using facelets but JSP Pages. Is there anyone who has an example of how I can prevent closing a modal panel when there is a validation error?

Barbara

[kphilipp]

"ylazzari" wrote:
In my default.xhtml template, I added the following:

 <a4j:outputPanel ajaxRendered="true">
 <h:form style="display:none" prependId="false">
 <h:inputHidden id="maximumSeverity" value="#{facesContext.maximumSeverity.ordinal}"/>
 </h:form>
 </a4j:outputPanel>

Basically, we now have an invisible form that gets refreshed on every postback and contains a hidden field that tells us the maximum severity in the message queue, or null if the queue is empty.

Next, I have a little utility javascript method like this:

function ajaxRequestContainsErrors() {
 return document.getElementById("maximumSeverity").value == "2";
}

This method simply reads the value of the hidden field and tests if its equal to the ERROR severity ordinal value.

I'm not sure if this approach always works.

In case I use

<f:validateLength minimum="5" maximum="5" />

I get the value "3" for maximumSeverity.

In case I use a more enhanced validation like

validator="#{sps.validateZipCode}"

I get the value "1" for maximumSeverity.

[kphilipp]

Now I've switched from the MyFaces JSF implementation to the JSF implementation provided with JBoss. Now I get the following results:

In case I use

<f:validateLength minimum="5" maximum="5" />

I get the value "2" for maximumSeverity.

But when I use a more enhanced validation like

validator="#{sps.validateZipCode}"

I get the value "0" for maximumSeverity.

[kphilipp]

"kphilipp" wrote:
But when I use a more enhanced validation like

validator="#{sps.validateZipCode}"

I get the value "0" for maximumSeverity.

Now I've figured out the reason for the value "0".

For the validator I re-used an example from a book as a sample. I ignored that this example used the simple constructor

public FacesMessage(String summary)

that only returns the severity level

Severity.INFO

.

After I switched to the constructor

public FacesMessage(FacesMessage.Severity severity,
 String summary,
 String detail)

using the severity level

Severity.ERROR

I've got the expected result.

[jaand96]

This doesn't work for me unless I trigger a validation error. Prior to this the maximumSeverity is null:

javax.el.PropertyNotFoundException: /panels/templatemodalpanel.xhtml @50,95 value="#{facesContext.maximumSeverity.ordina
l}": Target Unreachable, 'maximumSeverity' returned null on 'com.sun.faces.context.FacesContextImpl'

IS there a way to ensure maximumSeverity always exists?

[nbelaevski]

Hi,

As I can see, the idea is to put this into a separate form, so that it won't be submitted.

Another solution for the problem - evaluate "oncomplete" just on the server:

<a4j:commandButton value="Save" action="#{myController.save}" oncomplete="#{facesContext.maximumSeverity == null ? 'Richfaces.hideModalPanel(\'myModalPanelId\');' : ''}" />

[jaand96]

thanks, works fine.