ModalPanel question
Hi
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.