ModalPanel question
fabmars May 23, 2008 8:47 AMHi
I'm using JSF RI 1.2.09beta1, RF 3.2.0SR1, Facelets 1.1.14, and GlassfishV2.
I programmed some sort of "blog" where people can submit comments. At the end of each "blog" entry, the user has a link he can click to submit a comment.
<a4j:commandLink id="showCommentPanelLink" value="Leave comment" actionListener="#{blogView.doStartComment}" ajaxSingle="true" onclick="#{rich:component('commentModalPanel')}.show()"/>
Instead of going to another page, he's presented with a modal panel containing the form to fill. This form contains also a captcha to prevent spamming. I defined a servlet for this on the /jcaptcha path.
<rich:modalPanel id="commentModalPanel" autosized="true" moveable="true"> <f:facet name="header"> <h:panelGroup> <h:outputText value="Submit a comment..."/> </h:panelGroup> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage id="hideCommentModalPanelLink" value="/images/icons/no.png" style="cursor:pointer" /> <rich:componentControl for="commentModalPanel" attachTo="hideCommentModalPanelLink" operation="hide" event="onclick"/> </h:panelGroup> </f:facet> <h:form id="blogCommentForm"> <rich:messages showSummary="false" showDetail="true"/> <h:panelGrid columns="2" width="100%" border="0" cellpadding="0" cellspacing="0"> <h:outputLabel value="Your nick:" styleClass="required"/> <h:inputText label="Your nick" value="#{blogView.comment.nick}" size="30" maxlength="50" required="true"> <f:validateLength maximum="50"/> <twa:convertFirstName/> </h:inputText> <h:outputText value="Your title:"/> <h:inputText label="Title" value="#{blogView.comment.title}" size="50" maxlength="100"> <f:validateLength maximum="100"/> <twa:convertTitle/> </h:inputText> <h:outputLabel value="Comment:" styleClass="required"/> <h:inputTextarea label="Your comment" value="#{blogView.comment.content}" cols="50" rows="8" required="true"> <f:validateLength maximum="4096"/> <twa:convertText/> </h:inputTextarea> <h:panelGroup> <h:outputLabel value="Type-in the " styleClass="required"/> <h:outputLink value="http://en.wikipedia.org/wiki/Captcha" target="_blank" styleClass="required"> <h:outputText value="captcha"/> </h:outputLink> </h:panelGroup> <h:panelGrid width="100%" cellpadding="0" cellspacing="5" border="0"> <h:graphicImage value="/jcaptcha"/> <h:inputText label="Captcha" value="#{blogView.captcha}" size="8" maxlength="8" required="true"> <f:validateLength maximum="8"/> </h:inputText> </h:panelGrid> <a4j:commandButton id="submitCommentModalPanelLink" value="Submit" actionListener="#{blogView.doSubmitComment}" oncomplete="closeCommentModalPanelOnValidation();" reRender="comments"/> <h:panelGroup> <a4j:commandButton id="cancelCommentModalPanelLink" value="Cancel" immediate="true"/> <rich:componentControl attachTo="cancelCommentModalPanelLink" for="commentModalPanel" operation="hide" event="onclick"/> </h:panelGroup> </h:panelGrid> </h:form> </rich:modalPanel> <script type="text/javascript"> //<![CDATA[ function closeCommentModalPanelOnValidation() { if (document.getElementById('blogCommentForm:error')==null){ Richfaces.hideModalPanel('commentModalPanel'); }; }; //]]> </script>
Ok now 2 things to remark:
- when clicking on the "showCommentPanelLink", it calls a method called "doStartComment", which puts a new comment instance in #{blogView.comment}.
- the captcha presented to the user is programmed to refresh if the user types it wrong.
Now I have several problems:
- the modalpanel will close if there is a validation error, despite the javascript code I added from your Wiki
- Given that, if I open the modalpanel, submit a wrong captcha and reopen the panel, the image isn't refreshed. This can be a browser caching issue, so later, I added in my code some mechanism to force the captcha reloading:
<h:graphicImage value="/jcaptcha?r=#{blogView.randomValue}"/>
However the result is the same, no refresh (the random part of the url doesnt change from one modalpanel opening to another)
- Also, I noticed that when I reopen the modal panel after it was closed, the values I had previously entered are shown again, despite the fact the method "doStartComment" is called again and has obviously wiped out #{blogView.comment}.
It leads me to believe that when the modalpanel is shown a second time, its values are not reevaluated before rendering time (like if there was a savestate for example, but my code doesn't contain the attributes that does that on the modalpanel). Is there a workaround for that ?
Thanks in avance.