function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sakshi ChauhanSakshi Chauhan 

dynamic render of table inside output panel on command link click inside master table

I have two objects..master and child.
I am generating html table inside pageblock section for master record with end column as command link "Show/Hide" which should display sub panel having child records table and hide them on same link click.
Below is table in visualforce:
<apex:form id="forma">

<apex:outPutPanel>
                <table class="list"  style="width:100%;" border="0" cellpadding="0" cellspacing="0">
                  
                    
                    <thead>
                    blah blah...
                    </thead>
                    <tbody>
                        <apex:repeat value="{!ProductItemListWrapper}" var="pr" >          
                              <tr  class="dataRow even  first " data-id="<%= {!pr.ProdId} %>" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" style="{!IF(qL.subItemsCount>0,'background-color: lightblue','')}">
                                  
                                  <td >adnkand </td>
                                  <td> abc </td>
                                   <td class="dataCell  "  width="5%">
                                    <apex:commandLink id="show"  styleClass="sakshi" action="{!createBreakdownList}" rendered="{!IF(qL.subItemsCount>0,'true','false')}" value="Show" rerender="return false" >
                                        <apex:param value="{!qL.quoteLineItemId}" assignTo="{!qLItemID}" name="param"/>
                                    </apex:commandLink>
                                  
                               </tr>
                            
                           <tr>
                                <td colspan="18">
                                    <apex:outputPanel id="thePanel">
                                        <div id="{!qL.quoteLineItemId}" >
                                            <table class="list" style="width:100%;" border="0" cellpadding="0" cellspacing="0">
                                                <tr class="dataRow even  first " >
                                                    <th class="headerRow "> <div>Unit </div></th>
                                                    <th class="headerRow "> Length</th>
                                                    <th class="headerRow "> Quantity</th>
                                                      </tr>
                                                <apex:repeat value="{!qlItemB}" var="qlBrkdown" id="breakdownList">
                                                    <tr>
                                                        <td class="dataCell "  colspan="1"><span  class="sectionCControls" >{!qlBrkdown.Unit__c} </span></td>
                                                        <td class="dataCell "  colspan="1"><span  class="sectionCControls" >{!qlBrkdown.Length__c} </span> </td>
                                                        <td class="dataCell "  colspan="1"><span  class="sectionCControls" >{!qlBrkdown.Quantity__c}</span> </td>
                                                    </tr>
                                                </apex:repeat>
                                            </table>
                                       </div>
                                    </apex:outputPanel>
                                </td>    
                            </tr>
</apex:outputPanel>

below is my jquery:
var jQuery = $.noConflict(true);

jQuery(document).ready(function($){

$("[id$='thePanel']").hide();

    $("[id$='show']").click(function(event){

        var link = $(this);
       var id = $(this).closest("tr").data("id");

        $("[id$='thePanel']").slideToggle('200', function() {

            if ($(this).is(":visible")) {

                 link.text('Hide');    

                         

            } else {

                 createsubList();

                 link.text('Show');   

                   

                       

            }  

                  

        });

        event.preventDefault();

            

    });
});  

Please any one can suggest me approach to the same .  
James LoghryJames Loghry
Add an id to the apex:outputPanel and use the rerender="youridgoeshere" attribute in the apex:commandLink tag.  Additionally, check that your createBreakdownList method is returning a null PageReference.  Also, keep in mind that ids are case sensitive in Visualforce ("yourId" is different than "yourid")