0

This question already has an answer here:

I was using apex:tabPanel in my viusal force pages

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


   Here the jquery libraries are added

    */
 </head>
<apex:pageblock >
  <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/TestPageForSorting');" name="One1"  id="One1"   />
              <apex:tab label="MyTeam Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/TestPageForSorting');"  name="Open5"  id="tab2"   />
              <apex:tab label="My Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/TestPageForSorting');" name="OpenActivities2"  id="tabOpenAct2"  / >
              <apex:tab label="Patient View" switchType="client" ontabenter="window.parent.location.replace('/apex/TabCCPatientGrid');" name="OpenActivities3"  id="tabOpenAct3" / >
  </apex:tabPanel>  
<BR/>

</apex:pageblock>
</apex:page

This tab panels are working great.But for pagination and sorting i was refereing a component which is shown below

    <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')}"/>-->
   <apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'jquery.dataTables.js')}"></apex:includeScript >
   <apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'typeDetection.js')}"></apex:includeScript >   
   <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>  
      $.noConflict();
      function PageBlockTableEnhancerADV(){
             var 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>

 Now also my tabs are functioning accordingly.but when i try to add jquery liraries to header tag in VF page it was getting conflict and my tabs are not functioning.The libraries i have added were



    <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')}"  /> 

  to come out of this i have added 

     <script>
       var $x = jQuery.noConflict();
    </script>

but it doesn't help much .Can some one suggest how to over come with the conflict raised by these libraries ....

Visual force page is ...

   <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')}"  /> 
    <script>
    $.noConflict();
    </script>
    <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="table1"]').dataTable({

                });
            });
        </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:pageMessages ></apex:pageMessages> 
<apex:outputPanel id="SearchOverridePanelId">
  <apex:pageBlock title="Unclaimed Ticket">
  <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="Claimed Ticket" action="{!claimed}"/>&nbsp;&nbsp;&nbsp;
<apex:commandButton value="Patient View Ticket" action="{!Patientview}"/>&nbsp;&nbsp;&nbsp; -->
<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}">  
  </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">
          <c:Enhancetable targetPbTableIds="tableRecords" paginate="true" defaultPageSize="15" pageSizeOptions="15,25,50,100"/>

        </table>

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

<script>
       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(document).ready(function() {
   $jq('[id$=claim_id]').click(function() {
    });
</script>  
  </apex:page>

marked as duplicate by Simon Lawrence, Chris Duncombe, Samuel De Rycke Jun 23 '15 at 12:22

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • @SimonLawrence yaa thank's for that.... but that question haven't helped me in this scenario... – rajasekhar Jun 23 '15 at 9:40
  • I see that the answers/comments didn't help you unfortunately (and I'm sorry I can't help out myself) but is this still not the same question regarding JS conflicts for tabs/sorting in this scenario as the previous? – Simon Lawrence Jun 23 '15 at 9:47
  • @SimonLawrence i don't say it's completely different one ... few parts were plugged out from that... and after debugging i projected the exact problem here... which includes some deepness to the question... – rajasekhar Jun 23 '15 at 9:52
  • 1
    ok sure. I would perhaps have recommended editing/updating the original question to refine the support though, because as you can see, you have received basically the same answer below as the other question, which again hasn't helped! Either way, the community has not voted it to be a duplicate, so I guess it's ok! I hope you do get an answer to your problem - for yourself and future developers with this issue! – Simon Lawrence Jun 23 '15 at 11:11
  • 1
    @SimonLawrence thank you.. surely i will follow the community policies to decrease duplicate questions, which helps to community and developers in better way... – rajasekhar Jun 23 '15 at 11:13
0

First thing you would do is, either use all static reosurces using apex:includeScript tag or <script/> tag. Do not mix them. I would recommend to use <apex:includescript/>

Also, reset JQuery variable:

jQuery.noConflict(); // immediate next function

(function( $ ) {
    // Your jQuery code here, using the $ variable
})( jQuery );

and you can manage $ as:

$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
  • thanks for that... but when i changed the code accordingly the tabs are working fine but ... the component features are not reflecting to VF page like pagination and sorting...I have added $.noConflict(); after defining libraries in VF and component – rajasekhar Jun 23 '15 at 10:25
  • by adding $.noConflict(); the flow is going to catch block in component shown above.. and giving error $.trim() is not a function – rajasekhar Jun 23 '15 at 10:34
  • 1
    @rajasekhar try with not including $.noConflict(); jQuery( document ).ready(function( $ ) { // Code that uses jQuery's $ can follow here. }); // Code that uses other library's $ can follow here. – Ashwani Jun 23 '15 at 10:38
  • i have tried in this way too...if i remove that section the tabs are not responding... i have added my complete VF and component code in question... if possible please have a look at the code... – rajasekhar Jun 23 '15 at 11:04

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