0

I have a simple html table. I want another table2 to be showed only when I mouse hover on that table1 row. How to use Action support.

Please help below is my code,

Can you please help me out with my code. Below is my code..

apex:outputpanel >
       <apex:actionSupport event="onmouseover" action="{!showSupplier}" rerender="SD1" status="counterStatus">
          <table width="100%">
             <tr>
                <td width="50%">
                    First Table
                </td>
             </tr>
          </table>
       </apex:actionSupport>
     <apex:actionSupport event="onmouseout" action="{!hideSupplier}"/>
    </apex:outputpanel>
    <apex:outputPanel id="SD1"  >
        <apex:outputPanel rendered="{!showSup}">
       <table width="100%" border="0" >
          <tr>
             <th  style="background-color:#e3e3d7;"> <b>Supplier Description </b></th>
          </tr>
          <tr>
             <td >
                Second Table
             </td>
          </tr>
       </table>
    </apex:outputPanel>
        </apex:outputPanel>
    <apex:actionStatus startText=" (incrementing...)" stopText=" (done)" id="counterStatus"/>

</apex:form>

ShowSupplier is a method in which I'm setting a boolean value to TRUE. AND in Constructor is false.

2

Edit

Small change whenever you are using rerender never use same element for rendered attribute. It will always refresh the below elemnts.

like this

<apex:page controller="HidePanelCtrl">
    <apex:form>
        <apex:outputpanel >
           <apex:actionSupport event="onmouseover" action="{!showSupplier}" rerender="SD1" status="counterStatus">
              <table width="100%">
                 <tr>
                    <td width="50%">
                        First Table
                    </td>
                 </tr>
              </table>
           </apex:actionSupport>
        </apex:outputpanel>
        <apex:outputPanel id="SD1"  >
            <apex:outputPanel rendered="{!showSup}">
           <table width="100%" border="0" >
              <tr>
                 <th  style="background-color:#e3e3d7;"> <b>Supplier Description </b></th>
              </tr>
              <tr>
                 <td >
                    Second Table
                 </td>
              </tr>
           </table>
        </apex:outputPanel>
            </apex:outputPanel>
        <apex:actionStatus startText=" (incrementing...)" stopText=" (done)" id="counterStatus"/>

    </apex:form>
</apex:page>

Edit-2

<apex:page controller="HidePanelCtrl">
    <apex:form >
        <apex:outputpanel >
       <apex:actionSupport event="onmouseover" action="{!showSupplier}" rerender="SD1" status="counterStatus">
          <table width="100%" border="1">
             <tr>
                <td width="50%">
                    First Table
                </td>
             </tr>
          </table>
       </apex:actionSupport>
     <apex:actionSupport event="onmouseout" action="{!hideSupplier}" rerender="SD1" status="counterStatus"/>
    </apex:outputpanel>
    <apex:outputPanel id="SD1"  >
        <apex:outputPanel rendered="{!showSup}">
       <table width="100%"   border="1">
          <tr>
             <th  style="background-color:#e3e3d7;"> <b>Supplier Description </b></th>
          </tr>
          <tr>
             <td >
                Second Table
             </td>
          </tr>
       </table>
    </apex:outputPanel>
        </apex:outputPanel>
    <apex:actionStatus startText=" (incrementing...)" stopText=" (done)" id="counterStatus"/>
    </apex:form>
</apex:page>
  • 1
    wrapp your second table inside outputpanel with rerender attribte(intialliy set this to false) once you mouse over call a method there set the boolean value o true and rerender output panel... simple – Ratan Paul Dec 17 '15 at 7:32
  • 1
    @SfdcPro add your code in above question – Ratan Paul Dec 17 '15 at 9:05
  • 1
    @SfdcPro check my updated Edit Ans. – Ratan Paul Dec 17 '15 at 9:20
  • 1
    @SfdcPro let me know if this ans make sense to you ? – Ratan Paul Dec 17 '15 at 9:31
  • 1
    you need one more action support for mouseout call a method there set the boolena to false and rerender – Ratan Paul Dec 17 '15 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.