Question

Let’s say we have a simple table defined as:

<p:dataTable value="#{testBean.dummyStringData}" var="data">
    <p:column>
        <p:commandLink action="#{testBean.printData(data)}">
            <h:outputLabel value="#{data}" />
        </p:commandLink>
    </p:column>
</p:dataTable>

And a simple backing bean:

 public class TestBean {

    private List<String> dummyStringData = new ArrayList<String>();

    //getters and setters omitted 

    @PostConstruct
    public void postConstruct() {
        dummyStringData.add(new String("DummyData1"));
        dummyStringData.add(new String("DummyData2"));
        dummyStringData.add(new String("DummyData3"));
    }

    public void printData (String data) {
        System.out.println(data);
    }

Predictably, clicking on a link within the table will print the content of the clicked row to stdout.

Now, I would like for the printData method to be also called when a user hovers the mouse cursor over the p:commandLink within the table. To accomplish that I’ve tried nesting a p:ajax element inside the p:commandLink element:

<p:commandLink action="#{testBean.printData(data)}">
    <p:ajax event="mouseover" listener="#{testBean.printData(data)}" />
    <h:outputLabel value="#{data}" />
</p:commandLink>

This approach doesn’t seem to work for p:commandLink and p:commandButton component. Hovering the mouse over the link seems to do nothing. If I were to use a component other than those two (i.e. a p:inputText and nest a p:ajax like the above) I get the expected behaviour.

Now, using a p:commandLink‘s onmouseover and p:remoteCommand I do manage to trigger the appropriate ajax event:

<p:commandLink action="#{testBean.printData(data)}" onmouseover="rc()">
    <h:outputLabel value="#{data}" />
</p:commandLink>
<p:remoteCommand name="rc" action="#{testBean.printData(data)}" />

However, the data variable passed as a parameter to the printData method isn’t specific to the row from which the event was triggered. Instead, the last element from the collection is always used (in this case, that would be “DummyData3”).

I’m using Primefaces 3.0.M3 on MyFaces 2.1.3 with Tomcat 7.

Cheers!

Answer 1

There’s a solution on the PrimeFaces forum.

Alternatively…

I suspect that because the name of the generated JavaScript function will be the same for each iteration, the last one is the winner. You could do something like this to give each one a unique name:

<p:dataTable value="#{testBean.dummyStringData}" var="data" rowIndexVar="rowIndex">
    <p:column>
        <p:commandLink action="#{testBean.printData(data)}" onmouseover="rc_#{rowIndex}()">
            <h:outputLabel value="#{data}" />
        </p:commandLink>
        <p:remoteCommand name="rc_#{rowIndex}" action="#{testBean.printData(data)}" />
    </p:column>
</p:dataTable>