Ajax button and render inside Primefaces datascroller?

Question

I have a Primefaces [<p:dataScroller />][2] that I am using to display a list of lazy-loaded items. My JSF code looks something like this:

<p:dataScroller id="scroller" value="#{myAction.myDataModel}" var="item" lazy="true" chunkSize="10">
  <section>
    <h3>Here is my item : <h:outputText value="#{item.name}" /></h3>
  </section>
</p:dataScroller>

This code works with no problem. My backing code is able to lazy-load the items from the database on an as-needed basis, rather than pulling them all at once and paginating on the client side. However, now I would like to add an <h:commandLink /> within the datascroller and perform an Ajax submit, but only re-render the item that was clicked. My backing action would update the state of my item and I would display a different message based on this state. I thought I could do something like this:

<p:dataScroller id="scroller" value="#{myAction.myDataModel}" var="item" lazy="true" chunkSize="10">
  <section>
    <h:panelGroup id="#{item.name}" layout="block">
        <h3>Here is my item : <h:outputText value="#{item.name}" /></h3>
        <h:commandLink action="#{myAction.foo()}" value="Click here">
           <f:ajax render="#{item.name}" />
        </h:commandLink
    </h:panelGroup>
  </section>
</p:dataScroller>

...however, I've now learned that I can't have dynamic IDs within JSF, so the render of my <h:panelGroup /> fails. I can have the render attribute value of <f:ajax /> set to my JSF form, but that re-renders everything from scratch, which is not the desired behavior.

If I have 100 items displayed in my <p:dataScroller /> and I click on the link on item 30, is there any way to have only that item render? Is there a better way to handle this use case? Or am I completely stuck?

Kukeltje Kukeltje · Accepted Answer · 2015-02-23T18:00:57

You don't need dynamic id's. You can use PrimeFaces selectors, specifically designed for cases like this. So you can reference parents, items by class or whatever. The full jquery selector api is at your disposal Very flexible! Just not sure if it works with h:commandButton and f:ajax (maybe h:commandButton and p:ajax works). But what works for sure is

<p:commandButton update="@(:parent)" value="update parent" />

Ajax button and render inside Primefaces datascroller?

1 Answers