• Sakshi Chauhan
  • 0 Points
  • Member since 2015

  • Chatter
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
  • 1
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">

                <table class="list"  style="width:100%;" border="0" cellpadding="0" cellspacing="0">
                    blah blah...
                        <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"/>
                                <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>
                                                <apex:repeat value="{!qlItemB}" var="qlBrkdown" id="breakdownList">
                                                        <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>

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




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

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

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



            } else {











Please any one can suggest me approach to the same .  


can anyone pelase let me know below questions.


1. What is the use Javascript Remoting ?


2. If more flexible, When we need to use ?


3. What is the use of Actionfunction ?


4. What is the diffrenece between Actionfunction and Javascript remoting ?


5. JS remoting used for mainly calling the APEX method from javascript ? if yes what s the benefits ? can u please let me know real time scanerio ?


As of now, I know the js remoting the will be used for calling APEX method from javascript . i just want to know when we need to perform this ?