Saturday, February 2, 2013

jQuery selector in JSF2

Ajax support is one of the major upgrade of JSF2 over JSF1.2.
with ajax support in JSF2, we can decide the list of components to be rendered with the "render" attribute, and the list of components to be executed on the server with the "execute" attribute.

eg,
<f:ajax listener="#{testBean.listener}" execute="id1 id2 id3" render="id1 id4" />

in some situations, we may want to execute or render many components. Thus, the list could be very long. and reduce development efficiency.

in this case, jQuery selector could be used to find components based on classes, types, id, etc instead of specifying a long list of component ids.

With jQuery selector, it could find only input components, or by element type, eg text, select.
Performance could be slightly improved because only required components are rendered or executed.
Steps:
1. add jQuery into JSF2 if it is not already there
2. verify it is working.
3. define the selector pattern in execute and render attribute.
      eg.
        a. render span in the form (<h:panelGroup />)
        <f:ajax render="$('span')" listener="#{wizardBean.gotoWizard2}" />
        b. render all input only in the span
        <f:ajax render="$('span:input')" listener="#{wizardBean.gotoWizard2}" />
        b. render all select input only in the span
        <f:ajax render="$('span:input:select')" listener="#{wizardBean.gotoWizard2}" />

for more information about jQuery selector, please refer http://www.w3schools.com/jquery/jquery_selectors.asp

Done!!

LinkWithin

Related Posts Plugin for WordPress, Blogger...