-
1. Re: Seam jQuery Integration
francof Feb 10, 2009 9:41 PM (in response to nbhatia.bhatian.comcast.net)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 Feb 11, 2009 12:00 AM (in response to nbhatia.bhatian.comcast.net)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 Feb 11, 2009 6:26 AM (in response to 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 Feb 11, 2009 10:58 AM (in response to nbhatia.bhatian.comcast.net)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 Feb 12, 2009 6:11 PM (in response to nbhatia.bhatian.comcast.net)Thanks Giovanni, that's a great suggestion! I have implemented it but having two problems:
- 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.
- 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 Feb 13, 2009 3:57 PM (in response to 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 Feb 13, 2009 6:12 PM (in response to nbhatia.bhatian.comcast.net)I cannot make any test right now but
try to add a4j:region and reRender that part,
then remove globalOnly from rich:messagesLet me know
-
8. Re: Seam jQuery Integration
nbhatia.bhatian.comcast.net Feb 13, 2009 7:30 PM (in response to 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
francof Feb 13, 2009 9:48 PM (in response to nbhatia.bhatian.comcast.net)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 Feb 13, 2009 10:27 PM (in response to nbhatia.bhatian.comcast.net)I agree. I will check out the RichFaces forums.
-
11. Re: Seam jQuery Integration
binnyg Feb 13, 2009 11:51 PM (in response to nbhatia.bhatian.comcast.net)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 Feb 14, 2009 1:24 AM (in response to 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
binnyg Feb 14, 2009 5:20 AM (in response to nbhatia.bhatian.comcast.net)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 Feb 14, 2009 6:45 AM (in response to nbhatia.bhatian.comcast.net)Good questions!
- 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?
- 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