11 Replies Latest reply on Oct 21, 2009 9:38 AM by BJorn T Johansen

    Showing tooltip with default image and then change the image

    BJorn T Johansen Newbie

      I am showing a tooltip with a default image. But this image needs to bee changed to a different image after a server method has been called... What I am doing now, is this:

      <rich:toolTip direction="bottom-left" mode="ajax" styleClass="tooltip" showDelay="200">
       <a4j:actionparam value="#{vare.varenummer}" name="varenr3" assignTo="#{articleSearchController.loadImageURL}"/>
      ........
      


      I.e. I am forcing a call to the loadImageURL method on the server and using a poll to display the new image..:

      <a4j:region id="imageregion">
       <h:form>
       <h:graphicImage id="art_image" url="#{articleSearchController.articleImageURL}" height="64"/>
       <a4j:poll id="poll" interval="500" enabled="#{articleSearchController.imagePollEnabled}" reRender="imageregion"/>
       </h:form>
      </a4j:region>
      


      The problem with this, is the call to the server method is not async, so the tooltip is not displayed until after the server method has been called..

      There has to be a better way of doing this?


      Regards,

      BTJ


        • 2. Re: Showing tooltip with default image and then change the i
          BJorn T Johansen Newbie

          Aaaah... Missed that one... Thx... :)

          BTJ

          • 3. Re: Showing tooltip with default image and then change the i
            BJorn T Johansen Newbie

            It doesn't work....
            Well, the feature work but I have a problem...
            I am using <a4j:actionparam... > to set the chosen row when displaying the tooltip and it seems that this is not called until after the tooltip has displayed the default content...
            Is it a way for me to set the chosen row before the default content is displayed?

            (I have a rich:datatable that has tooltip on each row...)


            BTJ

            • 4. Re: Showing tooltip with default image and then change the i
              Ilya Shaikovsky Master

              please show dataTAble with tooltip code snippet.

              • 5. Re: Showing tooltip with default image and then change the i
                BJorn T Johansen Newbie

                Here it is..:


                <rich:dataTable id="articlestable" onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                 rendered="#{articleSearchController.showTable}"
                 onRowMouseOut="this.style.backgroundColor='transparent'"
                 cellpadding="0" cellspacing="0" bgcolor="#b8ccd3"
                 width="100%" border="0" var="vare" value="#{articleSearchController.articles}">
                 <f:facet name="header">
                 <rich:columnGroup style="background: lightsteelblue">
                 <rich:column>
                 <h:outputText value="#{msgs.article_number}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{msgs.article_texts}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{msgs.nobb_number}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{msgs.article_group}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{msgs.base_unit}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{msgs.article_costprice}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{msgs.article_salesprice}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{msgs.article_dg}"/>
                 </rich:column>
                 <rich:column>
                 </rich:column>
                 </rich:columnGroup>
                 </f:facet>
                 <rich:column>
                 <h:outputText value="#{vare.varenummer}"/><rich:spacer width="5"/>
                 <h:graphicImage url="pictures/buuf-icons-by-mattahan/Lock-32x32.png" height="16" rendered="#{vare.basisEnhet.lagerPris.egenPris}"/>
                 </rich:column>
                 <rich:column>
                 <a4j:repeat value="#{vare.varetekster}" var="varetekst">
                 <h:outputText value="#{varetekst}"/><br/>
                 </a4j:repeat>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{vare.nobbNr}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{vare.varegruppe.readableText}"/>
                 </rich:column>
                 <rich:column>
                 <h:outputText value="#{vare.basisEnhet.enhetkode.enhetkode}"/>
                 </rich:column>
                 <rich:column styleClass="numeric">
                 <h:panelGroup rendered="#{vare.basisEnhet.lagerPris != null}">
                 <h:outputText value="L: "/>
                 <h:outputText value="#{vare.basisEnhet.lagerPris.kostpris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </h:panelGroup>
                 <h:panelGroup rendered="#{vare.basisEnhet.direktePris != null}">
                 <br/>
                 <h:outputText value="D: "/>
                 <h:outputText value="#{vare.basisEnhet.direktePris.kostpris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </h:panelGroup>
                 </rich:column>
                 <rich:column styleClass="numeric">
                 <h:panelGroup rendered="#{vare.basisEnhet.lagerPris != null}">
                 <h:outputText value="#{vare.basisEnhet.lagerPris.salgspris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </h:panelGroup>
                 <h:panelGroup rendered="#{vare.basisEnhet.direktePris != null}">
                 <br/>
                 <h:outputText value="#{vare.basisEnhet.direktePris.salgspris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </h:panelGroup>
                 </rich:column>
                 <rich:column styleClass="numeric">
                 <h:panelGroup rendered="#{vare.basisEnhet.lagerPris != null}">
                 <h:outputText value="#{vare.basisEnhet.lagerPris.dg}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 <rich:spacer width="5"/>
                 <h:graphicImage url="pictures/Bullet-green.png" height="16" rendered="#{vare.lagerDgGreen}"/>
                 <h:graphicImage url="pictures/Bullet-red.png" height="16" rendered="#{vare.lagerDgRed}"/>
                 <h:graphicImage url="pictures/Bullet-ambar.png" height="16" rendered="#{vare.lagerDgAmber}"/>
                 <!--<h:panelGroup rendered="#{vare.basisEnhet.direktePris == null}">
                 <br/>
                 <rich:spacer width="5"/>
                 </h:panelGroup>-->
                 </h:panelGroup>
                 <h:panelGroup rendered="#{vare.basisEnhet.direktePris != null}">
                 <br/>
                 <h:outputText value="#{vare.basisEnhet.direktePris.dg}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 <rich:spacer width="5"/>
                 <h:graphicImage url="pictures/Bullet-green.png" height="16" rendered="#{vare.direkteDgGreen}"/>
                 <h:graphicImage url="pictures/Bullet-red.png" height="16" rendered="#{vare.direkteDgRed}"/>
                 <h:graphicImage url="pictures/Bullet-ambar.png" height="16" rendered="#{vare.direkteDgAmber}"/>
                 </h:panelGroup>
                 </rich:column>
                 <rich:column>
                 <h:panelGroup rendered="#{vare.finnesISortiment}">
                 <a4j:commandButton image="pictures/edit.png" action="#{articleSearchController.editArticle}" immediate="true" reRender="articlestablegroup">
                 <a4j:actionparam value="#{vare.varenummer}" name="varenr" assignTo="#{articleSearchController.chosenVarenr}"/>
                 </a4j:commandButton>
                 <rich:spacer width="10"/>
                 <a4j:commandButton image="pictures/remove.png" action="#{articleSearchController.deleteArticle}" immediate="true" reRender="articlestablegroup">
                 <a4j:actionparam value="#{vare.varenummer}" name="varenr2" assignTo="#{articleSearchController.chosenVarenr}"/>
                 </a4j:commandButton>
                 <rich:spacer width="10"/>
                 </h:panelGroup>
                 <h:panelGroup rendered="#{!vare.finnesISortiment}">
                 <a4j:commandButton image="pictures/add.png" action="#{articleSearchController.addArticle}" immediate="true" reRender="articlestablegroup">
                 <a4j:actionparam value="#{vare.varenummer}" name="varenr3" assignTo="#{articleSearchController.chosenVarenr}"/>
                 </a4j:commandButton>
                 <rich:spacer width="10"/>
                 </h:panelGroup>
                 <!--<h:graphicImage url="pictures/buuf-icons-by-mattahan/Device-Manager-System-Profiler-32x32.png" height="24">-->
                 <!--<a4j:support event="onmouseover">
                 <a4j:actionparam value="#{vare.varenummer}" name="varenr3" assignTo="#{articleSearchController.chosenVarenr}"/>-->
                
                 <a4j:commandButton image="pictures/buuf-icons-by-mattahan/Device-Manager-System-Profiler-32x32.png" style="height:24px" action="noaction">
                 <!--<a4j:support event="onmousemove">
                 <a4j:actionparam value="#{vare.varenummer}" name="varenr3" assignTo="#{articleSearchController.chosenVarenr}"/>
                 </a4j:support>-->
                 <rich:toolTip direction="bottom-right" mode="ajax" styleClass="tooltip" showDelay="200" >
                 <a4j:actionparam value="#{vare.varenummer}" name="varenr3" assignTo="#{articleSearchController.chosenVarenr}"/>
                 <f:facet name="defaultContent">
                 <h:graphicImage id="art_image_first" url="pictures/gears2.gif" height="64"/>
                 <!--<h:panelGroup>
                 <table>
                 <tr>
                 <td colspan="2">
                 <h:graphicImage id="art_image_first" url="pictures/gears2.gif" height="64"/>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_number}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareVarenr}"/>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_modulnr}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareModulnr}"/>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_inprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareInnkjopsPris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_original_costprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareOpprinneligKostpris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_original_salesprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareOpprinneligSalgspris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.Paaslag}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVarePaaslag}"/>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_costprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareKostpris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_salesprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareSalgspris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 </table>
                 </h:panelGroup>-->
                 </f:facet>
                 <table>
                 <tr>
                 <td colspan="2">
                 <h:graphicImage id="art_image" url="#{articleSearchController.articleImageURL}" height="64"/>
                 <!--<a4j:region id="imageregion">
                 <h:form>
                 <h:graphicImage id="art_image" url="#{articleSearchController.articleImageURL}" height="64"/>
                 <a4j:poll id="poll" interval="500" enabled="#{articleSearchController.imagePollEnabled}" reRender="imageregion"/>
                 </h:form>
                 </a4j:region>-->
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_number}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareVarenr}"/>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_modulnr}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareModulnr}"/>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_inprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareInnkjopsPris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_original_costprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareOpprinneligKostpris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_original_salesprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareOpprinneligSalgspris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.Paaslag}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVarePaaslag}"/>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_costprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareKostpris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 <tr>
                 <td nowrap="nowrap">
                 <h:outputText value="#{msgs.article_salesprice}:"/>
                 </td>
                 <td nowrap="nowrap">
                 <h:outputText value="#{articleSearchController.chosenVareSalgspris}">
                 <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
                 </h:outputText>
                 </td>
                 </tr>
                 </table>
                 </rich:toolTip>
                 </a4j:commandButton>
                 <!--</h:graphicImage>-->
                 </rich:column>
                 </rich:dataTable>
                





                • 6. Re: Showing tooltip with default image and then change the i
                  Ilya Shaikovsky Master

                  so seems code is ok.

                  default content is shown on the client as static image. after showing it - actual request for data sent and parameters passed to server. And the result shown after response comes back with the actual data..

                  • 7. Re: Showing tooltip with default image and then change the i
                    BJorn T Johansen Newbie

                    Which means I can' use defaultcontent...
                    I want to display all the values in the tooltip... And the only thing that takes time to get, is an image... So the image should be a static default image first and then changed when the image is ready to be displayed...
                    (all the other values are ready but I need the chosen row to display them).

                    Any other way to solve this?


                    BTJ

                    • 8. Re: Showing tooltip with default image and then change the i
                      Ilya Shaikovsky Master

                      so

                      default content:

                      <h:graphicImage id="art_image_first" url="pictures/gears2.gif" height="64"/>
                      ...
                      

                      and actual content
                      <h:graphicImage id="art_image_first" url="#{articleSearchController.articleImageURL}" height="64"/>
                      ...
                      


                      static picture in default and updated after loading with current. And the other content is static. Seems should be ok.

                      • 9. Re: Showing tooltip with default image and then change the i
                        BJorn T Johansen Newbie

                        No, other content is not static... It is dependent on which row is "selected". So I need to know which row is "selected" on the server side when getting the rest of the values for the tooltip from the server...

                        BTJ

                        • 10. Re: Showing tooltip with default image and then change the i
                          Nick Belaevski Master

                           

                          "btj" wrote:
                          Which means I can' use defaultcontent...
                          I want to display all the values in the tooltip... And the only thing that takes time to get, is an image... So the image should be a static default image first and then changed when the image is ready to be displayed...
                          (all the other values are ready but I need the chosen row to display them).

                          Any other way to solve this?


                          BTJ

                          You can use Javascript to achieve this.

                          • 11. Re: Showing tooltip with default image and then change the i
                            BJorn T Johansen Newbie

                            My javascript knowledge is minimal... How can I achieve this?

                            BTJ