How to trigger an ajax event listener on click of p:graphicImage?

Question

I want to do some processing when the user click on the p:graphicsImage inside a ui:repeat How do i do it.

<ui:repeat id="repeat" value="#{getData.image}" var="imageLst" varStatus="loop">
   <h:panelGroup>
      <p:graphicImage id="gi1" value="#{imageStreamer.image}" alt="image not available" >
          <f:param name="id" value="#{imageLst.imageID}" />
          <p:ajax id="aj2" event="click" listener="#{getData.searchID}" immediate="true" update=":form:tabView:check :form:growl"/>
      </p:graphicImage>
   </h:panelGroup>
</ui:repeat>

In the above code if i place the ajax part doesn't get triggered. How do i monitor a Click on the 'p:graphicImage'

Solution

The <p:graphicImage> doesn't support any ajax events.

Just wrap it in a <h:commandLink> (or the p: one).

<h:commandLink>
    <p:graphicImage id="gi1" value="#{imageStreamer.image}" alt="image not available" >
        <f:param name="id" value="#{imageLst.imageID}" />
    </p:graphicImage>
    <p:ajax id="aj2" listener="#{getData.searchID}" update=":form:tabView:check :form:growl"/>
</h:commandLink>

Comments

[user1433804]

I tried the above suggestion but once i click the image, the image disappears.

[BalusC]

That's a different problem. Is the listener method now invoked or not?

[user1433804]

Yes, the listener method gets invoked, but why does the image disappears. Actually all the images inside the ui:repeat disappers.

[BalusC]

As said, that's a different problem. You need to either improve <p:ajax update> so that it doesn't update it, or to fix #{getData.image} so that it doesn't change on every request.

[user1433804]

Ok thanks, i will try to fix one of them, need to figure out where the issue is.

[Sonic]

Quite Confusing that the Primefaces Showcase says: "p:ajax enables ajax behavior on any JSF component."

[BalusC]

@Sonic: take it as marketing phrase. Technically, it's only possible if the component's renderer is capable of recognizing and decoding it.