Load tooltip data per ajax request
smoking81 Sep 18, 2014 9:31 AMHello 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!