function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
gaurav.agrawal91.3963408275063662E12gaurav.agrawal91.3963408275063662E12 

Duplicate jquery table filter is loading on rerender ?

Hello Everyone,

I was working on Pageblocktable whose data is getting changed (rerender) on the command link.
For sorting and filtering i have used jquery plugin but when i am calling jquery method oncomplete in action support my searchfilter and pagination is getting loaded twice.

<apex:page controller="MDMLandingPageController" sidebar="false" showheader="false" action="{!intialize}" > 
        
        
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<apex:includeScript value="{!URLFOR($Resource.tablesorter, 'jquery.tablesorter.min.js')}"/>
<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />

<script type="text/javascript">
    $j = jQuery.noConflict();    
    $j(document).ready(function () {
    alert("Inside tablesorter");
    alert("end of script 1");
    var contactTable1 = $j("[id$=pg]").DataTable();
    alert("end of script");
    });
     
     function highlight()
     {
        <!-- $.removeData(j);--> 
       $j = jQuery.noConflict();
       $j(document).ready(function () { 
        var contactTable = $j("[id$=pg]").DataTable({
        "destroy": true
        });
       alert("inside highlisght");
        });
     }
    </script>
    

 <head>
        <title>Master Data Management</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        
    </head>
    
        <apex:stylesheet value="{!URLFOR($Resource.OEDoctor, 'styles/style_updated.css')}" />
 <link rel="stylesheet"
        href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'JQueryFiles/js/jquery-1.10.2.js')}" />
   <!--   <apex:includeScript value="{!URLFOR($Resource.mdmentry, 'js/mdm.js')}" />-->
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'JQueryFiles/js/jquery-ui.js')}" />  
     <apex:includeScript value="{!URLFOR($Resource.BVStaticResource, 'js/jquery.dataTables.js')}" />
     <apex:stylesheet value="{!URLFOR($Resource.BVStaticResource, 'css/jquery.dataTables.css')}" />
    

<apex:form id="TheForm">
   <apex:pageBlock id="pg1">
       <table width="1020px" borde-style="outset" border-color="#00A4E3" align="center" id="mytab" class="display">
                <tr>
                    <td style="width: 13em; vertical-align: baseline;" id="left_panel">
                     <div id="leftPanel" style="width: 13em;">
  <apex:pageBlockSection title="Master Data Management" collapsible="false" columns="1">
  <apex:repeat var="objMapEntity" value="{!mapEntityRecordType}">
  <apex:outputLink title="abc" value="#" >
  {!objMapEntity}
  <apex:actionSupport action="{!sObjectList}" reRender="pg" event="onclick"  status="counterStatus" oncomplete="highlight();"  >
    <apex:param name="X" value="{!objMapEntity}" />
    </apex:actionSupport>
    <apex:actionStatus id="counterStatus" >
    <apex:facet name="start">
                <div class="waitingSearchDiv" id="el_loading" style="background-color: #DCD6D6;
                       height: 100%;opacity:0.65;width:100%;"> 
                    <div class="waitingHolder" style="top: 74.2px; width: 91px;">
                        <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                        <span class="waitingDescription">Loading...</span>
                    </div>
                </div>
            </apex:facet>
   </apex:actionStatus>
 </apex:outputLink>
   </apex:repeat>
   </apex:pageBlockSection>
              </div>
                    </td>  
                    
                   
            <td>
           
                
               
<apex:pageBlockTable value="{!sObjectList}" var="res" id="pg" title="Click Column Header for Sorting"  >
        <apex:column headerValue="Action">
            <apex:outputPanel >
              <apex:commandLink action="{!getedit}">
              Edit<apex:param name="Y" value="{!res['id']}"/>
              </apex:commandLink>
              <apex:commandLink action="{!getview}">
              /View<apex:param name="Y" value="{!res['id']}"/>
              </apex:commandLink>
            </apex:outputPanel>
         </apex:column>
    <apex:repeat value="{!objectFields}" var="field"  >
        <apex:column value="{!res[field]}" >
         </apex:column>
     
    </apex:repeat>
  
    </apex:pageBlockTable>
    
   <apex:pageBlockButtons >
       <apex:commandButton action="{!add}" value="Add"/>
  </apex:pageBlockButtons>
        </td>
            </tr>
 </table>
             
            
</apex:pageBlock>

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

Can anyone help me on this
Suneel#8Suneel#8
It seems you are calling $j(document).ready twice.Did you try removing this in function highlight()? Can you post screenshot of VF page for better understanding of the issue
gaurav.agrawal91.3963408275063662E12gaurav.agrawal91.3963408275063662E12
Hi Suneel,

Thanks for your suggestion but i have tried removing the 
$j(document).ready in highlight function but there is no effect.

After looking back again in the code i have found that in VF page only PageBlock table is getting rerender and the Jquery table block is in other Page section so its creating duplicate.
After renrender the that Page section issue got resolved.