2 Replies Latest reply on Mar 7, 2017 4:53 PM by Cary Gillam

    Dynamic tooltip extended data table

    Cary Gillam Newbie

      GOAL:  Dynamically show 1 of 3 tooltip messages on an inputText element when the user hovers if an invalid value is entered into the field.

       

      Problem: When I type an invalid value into the inputText field the tooltip will not show up until I rerender the ExtendedDataTable.  Once I render the table I lose focus on the field and have to click into the field to continue adding value or change the value.  I would like to be able to continue typing and once i hover over the field the tooltip should show the correct message.

       

      I have tried to render just the tooltip but I get an error: 

                     Uncaught TypeError: Failed to execute 'appendChild' on Node': parameter 1 is not of type 'Node'

       

       

      <script type="text/javascript">
        function highlightRow(event) {  
           var id = event.source.id.replace('input','n'); // assuming 'input' is the id of your input  
               element = RichFaces.getDomElement(id); 
           console.log(id);
           $(element).removeClass('blue')
           $(element).addClass('red''); // where red is the name of your CSS class  
        }
      
        </script>
        <rich:extendedDataTable id="extDataTable" styleClass="styleClass"
             var="var" columnClasses="columnClass1,columnClass2"
             rowClasses="rowClass" rowKeyVar="rowKeyvar"
             value="#{bean.records} selection="
             #{bean.selection}"  
             selectionMode="single">
      
      
        <rich:column>
             <f:facet name="header">
                  <div class="div1">
                       <h:outputText value="Name" />
                  </div>
             </f:facet>
             <h:panelGroup id=idNameGroup">
                  <h:outputText value="#{bean.displayName}" />
             </h:panelGroup>
        </rich:column>  
                .  
                .  
                .  
        <rich:column>
             <f:facet name="header">
                  <div class="div1">
                       <h:outputText value="Number Value" />
                  </div>
             </f:facet>
             <a4j:outputPanel layout="block">
                  <h:inputText id="NewValue" maxlength="7"
                       onkeypress="return event.keyCode!=13;"
                       style="width:50px; height:12px;"
                       value="#bean.currentValue[var.id]}">
                       <f:converter converterId="numericConverter" />
                       <a4j:ajax event="keyup" limitRender="true"
                                 listener="#{bean.actionModifyRecord(var.id, 'NewValue')}"
                                 oncomplete="highlightRow(event)" />
                  </h:inputText>
                  <rich:tooltip id="errorToolTip" mode="ajax" target="NewValue"
                            showDelay="0" rendered="#{bean.isError(var.id)}" styleClass="red">
                            <h:outputText id="errorMessage" rendered="#{bean.isError(var.id)}"
                                      value="#{bean.error[var.id]}" />
                  </rich:tooltip>
             </a4j:outputPanel>
        </rich:column>
      
        • 1. Re: Dynamic tooltip extended data table
          Michal Petrov Master

          Why not simply show "Everything's OK" when there is no error? Having the tooltip work only under certain conditions doesn't seem like a good design.

          • 2. Re: Dynamic tooltip extended data table
            Cary Gillam Newbie

            What I needed to do is render the tooltip for all of the fields.  (So no rendered attribute) Then create a javascript method that is called with the onbeforeshow attribute to remove my css if there was no error message to display.  If there was an error then I need to add the css and hide the element.  The css needs to be added and removed from the wrp part of the rich:tooltip.  Then I needed to hide 2 layers in the rich:tooltip.  You need to hide the wrp and the cntr.

             

            function dynamicTooltip(event, isError){

                 var id = event.target.id;

                 wrp = document.getElementById(id+":wrp");

                 cntr = document.getElementById(id+":cntr");

               

                 if(isError){

                      $(wrp).addClass('sytle_red');

                 }else{

                      $(wrp).removeClass('style_red');

                      $(wrp).hide();

                      $(cntr).hide();

                 }

             

            }

             

             

            <a4j:outputPanel layout="block"> 

                     <h:inputText id="NewValue" maxlength="7" 

                           onkeypress="return event.keyCode!=13;" 

                             style="width:50px; height:12px;" 

                             value="#bean.currentValue[var.id]}"> 

                             <f:converter converterId="numericConverter" /> 

                             <a4j:ajax event="keyup" limitRender="true" 

                                       listener="#{bean.actionModifyRecord(var.id, 'NewValue')}" 

                                       oncomplete="highlightRow(event)" /> 

                        </h:inputText> 

                        <rich:tooltip id="errorToolTip" mode="ajax" target="NewValue" 

                                  showDelay="0 styleClass="style_red" onbeforeshow="dynamicTooltip(event,'#{bean.isError(var.id)}"> 

                                  <h:outputText id="errorMessage" value="#{bean.error[var.id]}" /> 

                        </rich:tooltip> 

                   </a4j:outputPanel>