14 Replies Latest reply on Feb 14, 2009 6:45 AM by nbhatia.bhatian.comcast.net

    Seam jQuery Integration

    nbhatia.bhatian.comcast.net

      Has Seam been integrated with jQuery? I am trying to use a simple jQuery modal dialog to host a form, but don't know how to make it work right. Here my sample code that brings up a modal dialog to create an account:


      <script type="text/javascript">
          $().ready(function() {
              $('#dialog').jqm();
          });
      </script>
      
      <p>
          <a href="#" class="jqModal">New account...</a>
      </p>
      
      <div class="jqmWindow" id="dialog">
          <h:form style="margin: 10px;">
              <p>
                  Name: 
                  <h:inputText id="accountName" required="true"
                      value="#{createAccountController.accountName}" />
                  <h:commandButton
                      value="Create"
                      action="#{createAccountController.createAccount}" />
              </p>
          </h:form>
          <a href="#" class="jqmClose">Close</a>
      </div>
      



      The problem is that validations are not being handled properly. If the user does not fill in the account name (which is a required field) and clicks the Create button, the dialog box simply goes away - no error messages. I suspect that the required validation is happening (because the action is not executed), just that the dialog is disappearing after the action.

        • 1. Re: Seam jQuery Integration

          jQuery is actually integrated with Richfaces, see the RF demo page for examples



          I am no expert on jQuery or Seam ;-) but I believe your problem is in the ready script.
          Replace all $ with the word jQuery - this is because of conflicts with other JS libraries loaded by RF





          • 2. Re: Seam jQuery Integration
            meetoblivion

            and if you're looking for a modal panel, maybe you should look at richfaces' modal panel...


            http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf (requires you to log in to jboss's site)

            • 3. Re: Seam jQuery Integration
              nbhatia.bhatian.comcast.net

              Thanks Franco and John. I have now switched to RichFaces - much nicer! However the modal panel still disappears when I press the action button - even if the required field is left blank. What am I missing?


              Here's the new code:


              <p>
                  <h:outputLink id="newAccountLink" value="#">
                      New account... 
                      <rich:componentControl for="createAccountPanel"
                          attachTo="newAccountLink" operation="show" event="onclick"/>
                  </h:outputLink>
              </p>
              
              <rich:modalPanel id="createAccountPanel" width="300" height="100">
                  <f:facet name="header">
                      <h:panelGroup>Create New Account</h:panelGroup>
                  </f:facet>
                  <f:facet name="controls">
                      <h:panelGroup>
                          <h:graphicImage id="hidelink" styleClass="hidelink"
                              value="images/close.png" />
                          <rich:componentControl for="createAccountPanel"
                              attachTo="hidelink" operation="hide" event="onclick"/>
                      </h:panelGroup>
                  </f:facet>
                  <h:form style="margin: 10px;">
                      <p>
                          Name
                          <h:inputText id="accountName" required="true"
                              value="#{createAccountController.accountName}" />
                          <h:commandButton
                              value="Create"
                              action="#{createAccountController.createAccount}" />
                      </p>
                  </h:form>
              </rich:modalPanel>
              

              • 4. Re: Seam jQuery Integration
                giomiano

                One solution is to use use a a4j:commandButton


                <a4j:commandButton action="#{createAccountController.createAccount}"
                data="#{facesContext.maximumSeverity.ordinal ge 2}"
                oncomplete="if(data == false) Richfaces.hideModalPanel('mp_createAccountPanel');"
                reRender="messagebox" value="Save">
                </a4j:commandButton>




                then add a rich:messages on your modalpanel



                Hope it helps!
                Giovanni

                • 5. Re: Seam jQuery Integration
                  nbhatia.bhatian.comcast.net

                  Thanks Giovanni, that's a great suggestion! I have implemented it but having two problems:



                  1. The modal panel is hiding even if facesContext.maximumSeverity.ordinal ge 2. Don't understand how that is possible, I am even printing out the severity and confirming that it is ge 2.

                  2. The main page (from which the modal panel is launched) is not refreshed anymore. This is understandable - since we are making an ajax request. But what would be the approach to refresh the main page after a successful ajax request - I need to do this to show the updates.



                  Here's my modified code:


                  <rich:modalPanel id="createAccountPanel" width="200" height="130">
                  
                      <rich:messages id="panelGlobalMessages" globalOnly="true" styleClass="message"
                          errorClass="errormsg" infoClass="infomsg" warnClass="warnmsg" />
                  
                      <!-- DEBUG -->
                      facesContext.maximumSeverity = #{facesContext.maximumSeverity}
                  
                      <h:form id="createAccount" styleClass="narrowForm">
                  
                          <s:decorate id="accountNameDecorate" template="/WEB-INF/templates/narrow-edit.xhtml">
                              <ui:define name="label">Account Name</ui:define>
                              <h:inputText id="accountName" required="true"
                                  value="#{createAccountController.accountName}">
                                  <a4j:support id="onblur" event="onblur" reRender="accountNameDecorate" />
                              </h:inputText>
                              <!-- DEBUG -->
                              <br/>facesContext.maximumSeverity = #{facesContext.maximumSeverity}
                              <br/>facesContext.maximumSeverity = #{facesContext.maximumSeverity.ordinal}
                          </s:decorate>
                  
                          <div class="buttons">
                              <a4j:commandButton
                                  value="Create"
                                  action="#{createAccountController.createAccount}"
                                  data="#{facesContext.maximumSeverity.ordinal ge 2}"
                                  oncomplete="if (data==false) Richfaces.hideModalPanel('createAccountPanel');"
                                  reRender="createAccountPanel" />
                          </div>
                  
                      </h:form>
                  
                  </rich:modalPanel>
                  



                  Thanks.


                  Naresh

                  • 6. Re: Seam jQuery Integration
                    nbhatia.bhatian.comcast.net

                    Some more information about the problem I am facing: even if I take out the oncomplete attribute that hides the modal panel, the panel goes away as soon as I click the a4j:commandButton. I don't understand this at all - I expected that the button would send an ajax request, get the response back and the modal panel would stay up. Can someone please help me understand this? Here's the modified code for command button.


                    <a4j:commandButton
                        value="Create"
                        action="#{createAccountController.createAccount}"
                        data="#{facesContext.maximumSeverity.ordinal ge 2}"
                        reRender="createAccountPanel" />
                    

                    • 7. Re: Seam jQuery Integration
                      giomiano

                      I cannot make any test right now but


                      try to add a4j:region and reRender that part,
                      then remove globalOnly from rich:messages


                      Let me know

                      • 8. Re: Seam jQuery Integration
                        nbhatia.bhatian.comcast.net

                        I tried to add a region around rich:messages and the form, then removed globalOnly - makes no difference - the modal panel still goes away. (I don't know what you mean by reRender that part - I don't believe I can give an id to a region and rerender it - so I have kept the rerender the same - it is rerendering the modal panel.)


                        Please correct me if I am wrong, but I don't see how adding a region will stop the modal panel from going away. As mentioned in my previous post, even when I take out the following line that hides the modal panel, it is still making no difference:


                        oncomplete="if (data==false) Richfaces.hideModalPanel('createAccountPanel');"
                        



                        So I am wondering if the modal panel is designed to go away after it has sent an AJAX request!

                        • 9. Re: Seam jQuery Integration

                          I guess we can conclude that this is really not a Seam issue.


                          Since you are now using the RF modal panel, you should search the Richfaces forum and post for help there.


                          If I have some time on the weekend to play, I will give it a whirl.


                          Good luck


                          • 10. Re: Seam jQuery Integration
                            nbhatia.bhatian.comcast.net

                            I agree. I will check out the RichFaces forums.

                            • 11. Re: Seam jQuery Integration

                              Modal panel is not supposed to close after AJAX request. Is there a reason why you are rerendering modal panel after saving your data?

                              • 12. Re: Seam jQuery Integration
                                nbhatia.bhatian.comcast.net

                                Binesh, you hit the nail on the head! The reason I was rerendering the modal panel was to show the error messages. However, this was closing the panel itself. I changed the code around to rerender only the form - now the error messages show up and the form stays! Thanks so much for helping me out on this.


                                Now the remaining problem is how to refresh the main page when the ajax request is successful. In this case, the modal panel goes away (because of the code inside oncomplete), however the main page is not refreshed and still shows old data. Any thoughts on how to solve this?


                                Thanks.
                                Naresh


                                • 13. Re: Seam jQuery Integration

                                  I am glad it worked. Next question is why do you want to reRender whole form? If it is only to display error messages then reRender error messages only (panelGlobalMessages).


                                  About parent page, again the same question, why do you want to reRender the whole page? May be you are trying to display the information entered in the modal panel. Try reRender attribute for partial update on parent page. I am not sure if will update even if you have errors in modal panel, but try it and let us know. Thanks.

                                  • 14. Re: Seam jQuery Integration
                                    nbhatia.bhatian.comcast.net

                                    Good questions!



                                    1. I am reRendering the form, because I am showing my error messages below each input control - not in a global message area. Do you have any other thoughts here?

                                    2. I tried partial update on the parent page and that worked. Of course, it does not update when there is an error, but that's the behavior I want - so life's good :-)



                                    Thanks again for your help.


                                    Naresh