2

I have a table which displays list of records.I want to achieve sorting and pagination function for this.As shown in figure i have achieved pagination and sorting.But this is affecting my tabs which are not responding when this sorting feature component is included. enter image description here

Tabs code

  <apex:tabPanel id="theTabPanel" selectedTab="ONE1" tabclass="activeTab" inactivetabclass="inactiveTab" contentStyle="font-size: .01px;">    
                <apex:tab label="Unclaimed Ticket" switchType="client"  ontabenter="window.parent.location.replace('/apex/UnclaimedTicketPage');" name="One1"  id="One1"  />
                <apex:tab label="MyTeam Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/MyTeamTicketpage');" name="Open5"  id="tab2"/>
                <apex:tab label="My Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/ClaimedTicketPage');" name="OpenActivities2"  id="tabOpenAct2"/>
                <apex:tab label="Patient View" switchType="client" ontabenter="window.parent.location.replace('/apex/TabCCPatientGrid');" name="OpenActivities3"  id="tabOpenAct3"/>
</apex:tabPanel>

here i am referencing the component

 <c:Enhancetable targetPbTableIds="tableRecords" paginate="true" defaultPageSize="15" pageSizeOptions="15,25,50,100"/> 

the component code is

<apex:component id="pbEnhancerMain" layout="block" selfClosing="true">
  <apex:attribute type="String" required="true" name="targetPbTableIds" description="A comma seperated list of Ids of target pageblock table" />
   <apex:attribute type="boolean" name="paginate" description="assign true if you want to use the pagination feature,default value is true" default="true"/>
   <apex:attribute type="Integer" name="defaultPageSize" description="Default page size when pagination is implemented"/>
   <apex:attribute type="String" name="pageSizeOptions" description="A comma seperated list of integer values that will displayed as dropdown for page size"/>
   <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"/>
   <!--<apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'jquery.dataTables.js')}"/>
   <apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'typeDetection.js')}"/>-->
   <Script src="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'jquery.dataTables.js')}"></script>
   <Script src="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'typeDetection.js')}"></script>   
   <apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"/>
   <apex:stylesheet value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources, 'jquery.dataTables_themeroller.css')}" />   

   <script>
       if(jQuery) {
        jQuery.noConflict();
    }
      function PageBlockTableEnhancerADV(){
      var PbeAdv=jQuery.noConflict();;
             PbeAdv=this;
             jQuery(function($){ 
                    PbeAdv.init($)
             });
      }
      PageBlockTableEnhancerADV.prototype={
            init : function($){
                try{

                      var targetIds = '{!targetPbTableIds}';
                      var targetIdArray = targetIds.split(",");

                      $(targetIdArray ).each(function(){
                        var elem = this.trim();
                        var elemObj = $("[id$='"+elem+"']");
                        elemObj.addClass("BlogForce9TableADV");
                      });

                       dataTable = $('.BlogForce9TableADV').dataTable({
                            "bJQueryUI": true,
                            "aaSorting": [],
                            "bFilter":true,
                            "bPaginate" : {!paginate},
                            "bDestroy": true,
                            "sPaginationType": "full_numbers",
                            "sDom": '<T><"ui-helper-clearfix dtExport"><><"H"lfr>t<"F"ip>',
                            "aLengthMenu": getALengthMenu(),
                            "iDisplayLength": {!IF(defaultPageSize == NULL,10,defaultPageSize)}
                      });

                   }
                  catch(err){
                      if (typeof console == "object") {
                          console.log(err);
                      }
                  }                    
            }
      }

      function getALengthMenu(){
          var temp = [ 10, 20, 30, 50];
          if({!pageSizeOptions != NULL}){ 

              temp = "{!pageSizeOptions}".split(",");
              for (a in temp ) {
                  temp[a] = parseInt(temp[a], 10); 
              }
          }

          return temp;
      }

      function initPageBlockTableEnhancerADV(){
          new PageBlockTableEnhancerADV({});
      }


      initPageBlockTableEnhancerADV();          
   </script> 

   <style>
        .paging_full_numbers .ui-button{
            color:black !important;
        }
    </style>

   </apex:component>

when i take out this component the tabs are working fine.But when i refer this component for pagination and sorting i was getting conflit which is not allowing me to click the tabs.

can some one help me where exactly the conflict is getting arised.

when i add var $jq = jQuery.noConflict(true); in visual force page it is not showing sorting and pagination things but tabs are working fine

My visual force page

<apex:page standardController="case" extensions="UnclaimedTicket" sidebar="false" tabStyle="case"  recordSetVar="search" >
<head>
    <apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/js/jquery.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/js/advancedtable_v2.js')}"/>  
    <apex:stylesheet value="{!URLFOR($Resource.jQuery, '/jQuery/css/advancedtable.css')}"  /> 
    <!-- This is(32,33,34 Lines) for Advance Search Text Box Removing Added by Lakshmi on 6/19/15 -->
 <style>
      .dataTables_filter, .dataTables_info { display: none; }
 </style>

       <script> 
        $ = jQuery.noConflict();
$(document).ready(function() {
   //code when page is ready 
   });

 </script> 
  </head>
<script>
function checkedfield(nm, txt,field){
   if(document.getElementById(nm) != null){
    if(document.getElementById(nm).disabled == true){
        document.getElementById(nm).disabled = false;
        var check = $("input[id$=Checked_Item]").val();
        $("input[id$=Checked_Item]").val(field + check);
        check =  $("input[id$=Checked_Item]").val();

    }else{
        document.getElementById(nm).disabled = true;
        var check = $("input[id$=Checked_Item]").val();
        if(check.indexOf(field) != -1)
            check = check.replace(field,'');
        $("input[id$=Checked_Item]").val(check); 

    }
   }

   if(document.getElementById(txt) != null){
    if(document.getElementById(txt).disabled == true){
        document.getElementById(txt).disabled = false;
        var check = $("input[id$=Checked_Item]").val();
        $("input[id$=Checked_Item]").val(field + check);
        check =  $("input[id$=Checked_Item]").val();
    }else{
        document.getElementById(txt).disabled = true;
        var check = $("input[id$=Checked_Item]").val();
        if(check.indexOf(field) != -1)
            check = check.replace(field,'');
        $("input[id$=Checked_Item]").val(check); 
    }
   }

   return true;
}

</script> 
<apex:form rendered="{!updateselected}" id="fm">

  <apex:outputPanel styleClass="customPopup" layout="block"  >
        <apex:pageBlock title="Mass Update" mode="edit">
            <apex:pageBlockButtons location="both">
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:commandButton value="Cancel" action="{!cancel1}" reRender="fm"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection id="mus1" columns="1">

<apex:inputfield label="Tier level"  Value="{!SMTPnew.Tier_Level__c}" required="false" /> 
                    <br/>

                    <apex:inputField label="Assign To"  Value="{!SMTPnew.Assigned_To__c}"/>

                                </apex:pageBlockSection>

        </apex:pageBlock> 

        </apex:outputpanel>
    </apex:form>
    <apex:form rendered="{!updateseverity}" id="fm1">

  <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!regionValue!='--Select--'}" >

        <apex:pageBlock title="Mass Update" mode="edit">

            <apex:pageBlockButtons location="both">
                <apex:commandButton value="Save" action="{!Masssave}"/>
                <apex:commandButton value="Cancel" action="{!cancel1}" reRender="fm1"/>

            </apex:pageBlockButtons>

            <apex:pageBlockSection id="mus11" columns="1">

<apex:inputfield label="Severity"  Value="{!SMTPnew.Severity__c}" required="false" rendered="{!regionValue=='Update Severity' }" /> 
<apex:inputfield label="Priority"  Value="{!SMTPnew.Priority__c}" required="false" rendered="{!regionValue=='Update Priority'}"/> 
<apex:selectList required="false" value="{!SMTPnew.Status}" size="1" rendered="{!regionValue=='Update Task Status'}">
<apex:selectOption itemValue="--None--" itemLabel="--None--"/>
    <apex:selectOption itemValue="Re-Open" itemLabel="Re-Open"/>
    <apex:selectOption itemValue="Closed" itemLabel="Closed"/>

</apex:selectList>

                    <br/>

                                </apex:pageBlockSection>

        </apex:pageBlock> 

        </apex:outputpanel>
    </apex:form>

 <apex:form rendered="{!selectednew}">  
 <apex:pageMessages ></apex:pageMessages> 
<apex:outputPanel id="SearchOverridePanelId">
  <apex:pageBlock title="Unclaimed Ticket">


   <style>
.activeTab {background-color: #B0E2FF; color:black;font-size:17px;
background-image:none}
.inactiveTab { background-color: lightgrey; color:black;font-size:17px;
background-image:none}
.background { background-color: lightgrey; font-size:12px; color:black}
</style>  

  <apex:tabPanel id="theTabPanel" selectedTab="ONE1" tabclass="activeTab" inactivetabclass="inactiveTab" contentStyle="font-size: .01px;">    
              <apex:tab label="Unclaimed Ticket" switchType="client"  ontabenter="window.parent.location.replace('/apex/UnclaimedTicketPage');" name="One1"  id="One1"   >

              </apex:tab>
              <apex:tab label="MyTeam Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/MyTeamTicketpage');" name="Open5"  id="tab2"   >

              </apex:tab>

              <apex:tab label="My Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/ClaimedTicketPage');" name="OpenActivities2"  id="tabOpenAct2"   >

              </apex:tab>

<apex:tab label="Patient View" switchType="client" ontabenter="window.parent.location.replace('/apex/TabCCPatientGrid');" name="OpenActivities3"  id="tabOpenAct3"   >

              </apex:tab> 


              </apex:tabPanel>  
<BR/>
<b>Mass Update:</b>&nbsp;&nbsp;
<apex:selectList value="{!regionValue}" size="1">
           <apex:selectOptions value="{!regionOptions}"/> 
        </apex:selectList>&nbsp;&nbsp;&nbsp;
        <apex:commandButton value="GO" action="{!Massupdate}"/> &nbsp;&nbsp;&nbsp;
        <BR/> <BR/>

<apex:commandButton value="Assign To"  action="{!submit}" rendered="{!IF($Profile.Name =='System Administrator'|| $Profile.Name =='CC Admin' , true , false)}" />
          <apex:commandButton id="clear_val1" value="Refresh" action="{!cler}"/> 
          <apex:commandButton value="New Ticket" action="{!NewTicket}"/>&nbsp;&nbsp;&nbsp;
         <apex:commandButton value="Assign To Admin" action="{!AssignToAdmin}" rendered="{!IF( $Profile.Name =='CC Non-Admin' ||$Profile.Name =='Non Admin CC', true , false)}"/>&nbsp;&nbsp;&nbsp; 
            <apex:commandButton value="Release" action="{!Release}"  rendered="{!IF($Profile.Name =='System Administrator'|| $Profile.Name =='CC Admin' , true , false)}"  />
        <apex:commandButton value="Claim" action="{!Claim}" />&nbsp;&nbsp;&nbsp;


          </apex:pageBlock>  
          </apex:outputPanel>
              <br/><br/>
             <apex:pageBlock rendered="{!selectednew}">  
Search By &nbsp;

<apex:selectList value="{!se}" size="1" >
              <apex:selectOption itemValue="--None--" itemLabel="--None--" /> 
              <apex:selectOption itemValue="BlueStar ID" itemLabel="BlueStar ID" />
              <apex:selectOption itemValue="HubID" itemLabel="Patient ID" />
              <apex:selectOption itemValue="SR Type" itemLabel="SR Type" />
              <apex:selectOption itemValue="Tier Level" itemLabel="Tier Level" />
              <apex:selectOption itemValue="Priority" itemLabel="Priority" />
              <apex:selectOption itemValue="Severity" itemLabel="Severity" />
              <apex:selectOption itemValue="Patient Name" itemLabel="Patient Name"/>
              <apex:selectOption itemValue="Status" itemLabel="Status"/>
              <apex:selectOption itemValue="Follow-up Date" itemLabel="Follow-up Date"/>
              <apex:selectOption itemValue="Provider Name" itemLabel="Provider Name" />

</apex:selectList>
&nbsp;&nbsp;&nbsp;
Enter {!labeling} Value &nbsp;
 <apex:inputtext id="search_val" value="{!idValEntr}" /> &nbsp; &nbsp;&nbsp; &nbsp;<apex:commandButton value="Search" action="{!doSearch}" />
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

 <apex:commandButton id="clear_val" value="Clear" action="{!cler}">
 </apex:commandButton> 

  </apex:pageBlock>  
<apex:outputPanel id="pbtb1"  rendered="{!selectednew}">
     <apex:pageBlock mode="maindetail" >
     <!--======================Jquery=================================-->
            <table  width="100%" id="tableRecords" class="advancedtable"  styleClass="list" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <!-- This(275 Line) For Sorting Pagenation,Default  Size 6/19/15 added by Lakshmi -->
           <c:Enhancetable targetPbTableIds="tableRecords" paginate="true" defaultPageSize="15" pageSizeOptions="15,25,50,100"/>

            <tr>
                <th style="text-align:left;">Select</th>
               <!-- <th style="text-align:left;">Action</th>-->
                <th style="text-align:left;">Service Request ID</th>
                 <th style="text-align:left;">BlueStar ID</th>
                <th style="text-align:left;">Patient ID</th> 
                <th style="text-align:left;">Patient Name</th>
                <th style="text-align:left;">Tier Level</th>
                <th style="text-align:left;">Days to date</th>
                <th style="text-align:left;">Priority</th>
                <th style="text-align:left;">Severity</th>
                <th style="text-align:left;">Status</th>
                <th style="text-align:left;">Follow-up Date </th>

                <th style="text-align:left;">Assign To</th>

            </tr>
            </thead>
            <tbody>            
                <apex:repeat var="tas" value="{!cases}"   id="tableRecords"  >
                    <tr>
                    <td style="padding-left:5px;text-align:left;"><apex:inputField Value="{!tas.isCaseDeleted__c}">
                     </apex:inputField>
                        </td>


                    <td>
                    <u><ol><a href="/apex/CustomTicketsave?id={!tas.id}&se={!se}&idValEntr={!idValEntr}&currentURL={!currentURL}" class="tooltip" > {!tas.CaseNumber}  
                        <span>
                            <apex:pageBlockSection columns="1">
                                <apex:outputText label="Provider Name">{!tas.Provider__c}</apex:outputText>
                                <apex:outputText label="SR Type">{!tas.SR_Types__c}</apex:outputText>
                                <apex:outputText label="Created Date">{!tas.Created_Date__c}</apex:outputText>
                               <apex:outputText label="Notes/Comments">{!tas.Notes_Commentss__c}</apex:outputText> 
                            </apex:pageBlockSection>
                        </span>
                    </a> </ol> </u>              
                    </td>
                   <td style="padding-left:5px;text-align:left;">
                           <a href="/apex/patrecords?BsId={!tas.Blue_Star_ID__c}&se={!se}&idValEntr={!idValEntr}&currentURL={!currentURL}" style="{color: blue; background: white;text-decoration: underline} 
                       :visited {color: green}
                      :hover {background: yellow}
                         :visited:hover {color: purple}">{!tas.Blue_Star_ID__c}</a>
                           </td>  
                                                       <td style="padding-left:5px;text-align:left;">{!tas.Patient_Id__c}</td>  

                                                   <td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Patient__c}"/></td> 

                         <td style="padding-left:5px;text-align:left;"><apex:outputfield Value="{!tas.Tier_Level__c}"/></td>
                            <td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Days_to_Date_new__c}"/></td>
                                 <td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Priority__c}"/></td>
                         <td style="padding-left:5px;text-align:left;"><apex:outputfield Value="{!tas.Severity__c}"/></td>

                            <!--<td style="padding-left:5px;text-align:left;"><apex:outputfield Value="{!tas.Follow_Up_Date__c}"/></td>-->
                         <!-- <td style="padding-left:5px;text-align:left;"><apex:outputText value="{0,date,yyyy'-'MM'-'dd}"  >
                            <apex:param value="{!tas.Followup__c}" />
                            </apex:outputText></td> -->
                                                       <td style="padding-left:5px;text-align:left;">{!tas.Status}</td>

                           <td style="padding-left:5px;text-align:left;"><apex:outputtext Value="{!tas.Followup__c}"/></td> 

                         <td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Assigned__c}"/></td>
                    </tr>
                </apex:repeat> 
            </tbody>
        </table>

            </apex:pageBlock>
        </apex:outputPanel>
</apex:form>

<script>
 j$ = jQuery.noConflict();
            j$(document).ready( function () {

                });
            });
       function testclick() {

                 $('input[id$=search_val]').val('');
        }
        </script>

   <script type="text/javascript" language="javascript">


    if(jQuery) {
        jQuery.noConflict();
    }
    var $jq = jQuery.noConflict();
    function testrun() {
    cler();
    }
   $jq('[id$=claim_id]').click(function() {
</script>  
  </apex:page>
3
  • 1
    Hi, try to replace your "script" tags with "apex:includeScript" ones. It may be source of conflict (happened to me once). Jun 22, 2015 at 14:59
  • @JulienGaïotto Thanks for that but it doesn't help me in this senario.. seems to be there was jquery conflict with $... but i was not able to figure it out..
    – Rajasekhar
    Jun 22, 2015 at 15:03
  • @JulienGaïotto while debugging i figured out .. it is giving $.trim() function is not found when i add jQuery.noConflict(true); in vf page, in this case i was not getting this sorting feature and pagination .. i was getting plaing table with all tabs functioning perfectly..
    – Rajasekhar
    Jun 22, 2015 at 15:05

2 Answers 2

3

Did you look at this article?

I think using $ as the no conflict will cause a conflict since I suspect SFDC's own use of jQuery is using that identifier. So I would review the article and use a different identifier, as described here: The key paragraph:

There are other libraries that make use of the same global variable name ("$") that jQuery uses by default — Force.com's default interface commonly includes at least one such library. Considering this issue, combining jQuery with Force.com interfaces can cause a conflict on the client side. There's an easy solution, however:

j$ = jQuery.noConflict();
j$(document).ready(function() {
   //code when page is ready 
   });
2
  • Thanks for that... i have updated my code accordingly but the tabs are not working even..I have added my visual force page code in question... if possible have a look at that
    – Rajasekhar
    Jun 22, 2015 at 16:58
  • See edit above - try using a different identifier for jQuery e.g. j$ Jun 22, 2015 at 17:00
0

This sort of thing will be easier to avoid if you use a closure.

(function ($) {
    "use strict";
    // do stuff
})(jQuery.noConflict());

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.