How to integrate seam with jQuery

Question

Our project is developed with seam. Customer changes the UI and provided the UI prototype using jQuery. Now we are facing lots of trouble integrating jQuery into seam. Customer wanted more rich UI.

(1) How do I create modal-popup in seam. Any basic code?? (2) How do I call partial submit (or ajax call) using jQuery? In other words how do I invoke seam action from jQuery?

Answer 1

If you are simply wanting to create modal-popup and call a partial submit I'd suggest using the Richfaces tag library which you may already be using.

To create a modal dialog simply use the tag to create the modal panel:

<rich:modalPanel id="myModalPanel" minHeight="100" height="100" minWidth="100" width="100" zindex="2000">
    Insert content for modal panel here
</rich:modalPanel>

Now you can add a tag to a button or link to hide and show the modal panel:

<h:outputLink value="#" id="showLink">
    <rich:componentControl for="myModalPanel" attachTo="showLink" operation="show" event="onclick" />
</h:outputLink>


<h:outputLink value="#" id="hideLink">
        <rich:componentControl for="myModalPanel" attachTo="hideLink" operation="hide" event="onclick" />
</h:outputLink>

And to do an ajax call you would use the tag inside the tag that you would like to make the ajax call. So, for instance, if you wanted an action to fire when the text of a field changes you would do the following:

<h:inputText id="myField" value="#{myBean.myField}">
    <a4j:support ajaxSingle="true" event="onChange" reRender="list fields you want to rerender when the methods completes" action="#{myBean.methodToCall}" />
</h:inputText>

Answer 2

Go check out the component showcases of icefaces and richfaces, two jsf AJAX cable libraries.

Partial submit via icefaces:

  <ice:outputText value="#{myBean.myField}" />
  <ice:form>
     <ice:commandButton action="#{myBean.doSomethingToField()}" value="button" />
  <ice:form>

modal popup with icefaces you can read more about here.

My personal experience with both: Richfaces mixed better with other jsf libs, icefaces has more advanced AJAX capabilities (like server sided push, kinda like comet) the basic AJAX functionality is easier to set up and use, but plays difficult sometimes when you mix it with other jsf libs. Both have different component libraries so be sure to check them out; you don't want to mix these libs later on.

Answer 3

You can call seam components from jQuery via Seam Remoting. Take a look at http://docs.jboss.org/seam/latest-2/reference/en-US/html/remoting.html for more information.