how to overcome jquery conflict

Question

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>

Hi, try to replace your "script" tags with "apex:includeScript" ones. It may be source of conflict (happened to me once). — Julien Gaïotto, 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

BritishBoyinDC · Accepted Answer · 2015-06-22 16:58:42Z

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 
   });

edited Jun 22, 2015 at 16:58

answered Jun 22, 2015 at 15:26

BritishBoyinDC

13.2k2 gold badges41 silver badges76 bronze badges

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$
– BritishBoyinDC
Jun 22, 2015 at 17:00

Add a comment |

Adrian Larson · Accepted Answer · 2015-06-22 17:27:07Z

0

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

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

answered Jun 22, 2015 at 17:27

Adrian Larson♦

147k36 gold badges216 silver badges400 bronze badges

Add a comment |

Stack Exchange Network

how to overcome jquery conflict

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
visualforce-component
jquery
pagination
tabpanel
or ask your own question.

Linked

Hot Network Questions

how to overcome jquery conflict

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

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

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
visualforce-component
jquery
pagination
tabpanel
or ask your own question.