1 Reply Latest reply on May 23, 2008 8:57 PM by Fab Mars

    ModalPanel question

    Fab Mars Novice

      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.