Load tooltip data per ajax request

[smoking81]

Hello everybody! I hope you can help me, I have spent several hours with this simple problem but couldn't find a solution yet..

What I want to do is to load data from the server before showing a tooltip for a text placed within a datatable. Originally I had something like this: 

<rich:dataTable id="table1" value="#{mySessionBean.carList}" var="car">
....
<rich:column>
<a4j:outputPanel onmouseover="loadMotorDetails();">
    <h:outputText value="#{car.motorBrand}" id="motorbrand" />
     <rich:tooltip mode="ajax" id="tooltip">
         <h:panelGrid columns="2">
            <h:outputText value="Motor Details: " />
            <h:outputText value="#{car.motorDetails}" />
         </h:panelGrid>
     </rich:tooltip>
</a4j:outputPanel>
<a4j:jsFunction name="loadMotorDetails" actionListener="#{myRequestBean.doLoadMotorDetails(car)}" />
</rich:column>
...
</rich:dataTable>

@RequestScoped
@Named
public class MyRequestBean {

    @Inject
    private MySessionBean mySB;

    public void doLoadMotorDetails (Car car) {
        MotorDetails md =//Read from DB..
        car.setMotorDetails(md);
    }
}

@SessionScoped
@Named
public class MySessionBean {
    private List<Car> carList;
    //Setter + getter

}

public class Car {
    private String motorDetails;
    private String motorBrand;
    //Setter + getter
}

Now, my problem is I cannot achieve what I want. If I use the code posted above, the actionListener will get always the last car in the table. I tried with almost all the suggestions I found here: How to pass a parameter value to a4j:jsFunction and here: a4j:jsFunction with actionListener inside of h:dataTable but none worked..

If I attach an ajax behavior like this to the panel the action is properly executed but not in the proper sequence (I tried with several values for render / event, but I cannot get the tooltip to be loaded just after the action and then remain fixed on the screen):

<rich:column>
<a4j:outputPanel id="tooltipPanel">
    <h:outputText  value="#{car.motorBrand}" id="motorbrand" />
    <a4j:ajax event="mouseover" listener="#{myRequestBean.doLoadMotorDetails(car)}" execute="@this" render="@this" />
    <rich:tooltip mode="ajax" id="tooltip">
         <h:panelGrid columns="2">
            <h:outputText value="Motor Details: " />
            <h:outputText value="#{car.motorDetails}" />
         </h:panelGrid>
     </rich:tooltip>
</a4j:outputPanel>
</rich:column>

Can you please show me the right way to implement this simple requirement? Thanks a lot in advance!

[bluez974]

The showcase example should just work fine in your case.

Depending on your jstl version you can call directly a method which returns the expecting string in your outputText value attr

<rich:column>

<h:panelGroup id="tooltipPanel" >

    <h:outputText  value="#{car.motorBrand}" id="motorbrand" />

          <rich:tooltip showEvent="mouseenter" mode="ajax" styleClass="tooltip" layout="block" attached="true">
                    <f:facet name="loading">
                        <strong>Wait...</strong>
                    </f:facet>
                    <span style="white-space: nowrap">This tool-tip content was <strong>rendered on server</strong><br />
                    </span>
                    <h:panelGrid columns="2">
                        <h:outputText style="white-space:nowrap" value="tooltips requested:" />
                        <h:outputText value="#{myRequestBean.doLoadMotorDetails(car)}" styleClass="tooltipData" />
                    </h:panelGrid>
               </rich:tooltip>
</h:panelGroup>

</rich:column>

public String doLoadMotorDetails (Car car) {
          if (car.getMotorDetails() == null ) {
             MotorDetails md =//Read from DB..

             car.setMotorDetails(md);
          }
        return car.getMotorDetails();
    }