1 Reply Latest reply on Sep 23, 2014 10:39 AM by Franck Gasparotto

    Load tooltip data per ajax request

    smoking81 Newbie

      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!

        • 1. Re: Load tooltip data per ajax request
          Franck Gasparotto Newbie

          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();
              }