Uncaught ReferenceError: JQuery не определен в salesforce

Question

Я добавляю два jquery для DataTable и другого для Range Range, но мой Range Slider не отображается. он дает мне эту ошибку

Uncaught ReferenceError: Jquery is not defined.

Мой код ниже, и это оказывает ползунок два диапазона.

<apex:page id="page" controller="AttachmentListWithFilterController" sidebar="false" readOnly="true"> 
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.2.min.js')}"/> 
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.16.custom.min.js')}"/> 
<apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> 

    <link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"/> 

<script type="text/javascript"> 

      $(function() { 
      $("#example1").dataTable();    
     });   

    </script> 






    <apex:actionStatus id="actStatusId" > 
       <apex:facet name="start" > 
        <img src="/img/loading.gif" />      
       </apex:facet> 
      </apex:actionStatus> 

<!-- <c:waitScreen > 
     <img src="/img/loading32.gif" /> 
     <div style="font-size:150%;padding:5px">Please Wait....</div> 
    </c:waitScreen>  -->  

<script type="text/javascript"> 

     //This will load as soon as the page is ready and will setup our slider 
     var str; 
     $(document).ready(function(){ 
      var i=0,a=0; 

      str = document.getElementById('{!$Component.form.selectedF}').value; 

      var b=document.getElementById('{!$Component.page.form.pb.slidervalue.idInputHiddenMax}').value; 

      console.log('Value of b'+b); 

      $("#slider-range").slider({ //This line creates a slider on the DIV specified, options are passed arguments, comma separated below 
       range: true, //This give the slider and top and bottom 
       min: 0, //Min value for slider 
       max: b, //Max value for slider 

       values: ['{!sSliderFieldMin }','{!sSliderFieldMax }'], //Start values for the slider 
       slide: function(event, ui){ //This function executes every time slider is moved and applies the slider values to the inputHidden fields as well as the output below the slider 
        document.getElementById('{!$Component.page.form.pb.slidervalue.idInputHiddenMin}').value = ui.values[0]; 
        document.getElementById('{!$Component.page.form.pb.slidervalue.idInputHiddenMax}').value = ui.values[1]; 
        $("#amountValue").html(+ ui.values[0] + 'KB - ' + ui.values[1] + 'KB'); 

        //callfind(); 
        //console.log(i++); 
       }, 
       stop:function(event,ui){console.log(ui);callfind();} 
      }); 

      $("#amountValue").html(+ $("#slider-range").slider("values", 0) + 'KB - ' + $("#slider-range").slider("values", 1) + 'KB'); 
     }); 

     function checkMethod(){ 

     var i=0; 
      str = document.getElementById('{!$Component.form.selectedF}').value; 
     var b=document.getElementById('{!$Component.page.form.pb.slidervalue.idInputHiddenMax}').value; 

      console.log('Value of b'+b); 

      $("#slider-range").slider({ //This line creates a slider on the DIV specified, options are passed arguments, comma separated below 
       range: true, //This give the slider and top and bottom 
       min: 0, //Min value for slider 
       max: b, //Max value for slider 

       values: ['{!sSliderFieldMin }',b], //Start values for the slider 
       slide: function(event, ui){ //This function executes every time slider is moved and applies the slider values to the inputHidden fields as well as the output below the slider 
        document.getElementById('{!$Component.page.form.pb.slidervalue.idInputHiddenMin}').value = ui.values[0]; 
        document.getElementById('{!$Component.page.form.pb.slidervalue.idInputHiddenMax}').value = ui.values[1]; 

        $("#amountValue").html(+ ui.values[0] + 'KB - ' + ui.values[1] + 'KB'); 


        //callfind(); 
        //console.log(i++); 
       }, 
       stop:function(event,ui){console.log(ui);callfind();} 
      }); 

      $("#amountValue").html(+ $("#slider-range").slider("values", 0) + 'KB - ' + $("#slider-range").slider("values", 1) + 'KB'); 
     } 
    </script> 

     <script type="text/javascript"> 
      function selectAllCheckboxes(obj,receivedInputID){ 
       var inputCheckBox = document.getElementsByTagName("input"); 
       for(var i=0; i<inputCheckBox.length; i++){ 
        if(inputCheckBox[i].id.indexOf(receivedInputID)!=-1){ 
         inputCheckBox[i].checked = obj.checked; 
        } 
       } 
      } 
      function selectThis(ele,id){ 
       if(ele.checked) 
        str+=id; 
       else 
        str = str.replace(id,''); 
       document.getElementById('{!$Component.form.selectedF}').value = str; 
      } 


    </script> 



<apex:pageMessages ></apex:pageMessages> 

    <apex:Form id="form"> 
    <apex:inputhidden id="selectedF" value="{!selectedFiles}"/> 
     <apex:actionFunction name="callfind" action="{!searchByRange}" reRender="PGTable" status="actStatusId" /> 
    <apex:pageBlock id="pb" > 
    <apex:pageblockSection title="Select Type" collapsible="false">   
      <apex:selectRadio value="{!Selected}"> 
       <apex:actionSupport event="onchange" action="{!TakeOther}" reRender="PGTable,pblock,showOwner,showslider,slidervalue" onComplete="checkMethod();"/> 
        <apex:selectoptions value="{!radioValues}" /> 
      </apex:selectRadio> 
    </apex:pageBlockSection> 


    <apex:pageBlockSection title="Filter" collapsible="true" columns="2" id="pblock"> 
       <apex:panelGrid columns="3" id="showOwner"> 

        <apex:outputLabel value="Owner" rendered="{!renderName4}"/> 

        <apex:inputField value="{!attachmentToUser.OwnerId}" rendered="{!renderName1}" id="AttachmentID" required="false"/> 
        <apex:inputField value="{!cv.OwnerID}" rendered="{!renderName2}" id="FileID" required="false"/> 
        <apex:inputField value="{!documentToUser.AuthorId}" rendered="{!renderName3}" id="DocumentID" required="false"/> 
        <apex:commandButton action="{!searchByOwner}" value="Submit" reRender="DemoRepeat" rendered="{!ShowSumbit}"/> 

       </apex:panelGrid> 

      <apex:pageBlockSectionItem id="showslider" > 

         <div id="slider-range" style="font-size: 90%; margin-top: 0.5em;width:100%"></div> 
         <div id="amountValue" style="text-align: center"></div> 
         <apex:actionFunction action="{!searchByRange}" name="myFunction" reRender="PGTable"/> 

      </apex:pageBlockSectionItem> 

       </apex:pageBlockSection> 

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

      <apex:inputhidden value="{!sSliderFieldMin}" id="idInputHiddenMin"/> 
      <apex:inputhidden value="{!sSliderFieldMax}" id="idInputHiddenMax"/> 
      </apex:pageBlockSection>  


       <center> <apex:commandButton value="Delete Selected" reRender="PGTable" action="{!deleteSelected}" rendered="{!ShowDelete}"/></center> 



     <table id="example1" class="table table-bordered table-striped"> 

     <thead> 
      <tr> 
       <th>Name</th> 
       <th>BodyLength</th> 
       <th>Created Date</th> 
       <th>Owner Name</th> 
      </tr> 
     </thead> 

      <tbody> 
      <apex:repeat value="{!listofRecords}" id="DemoRepeat" var="a"> 
      <tr> 
    <td> <apex:outputText value="{!a.Name}"/></td> 
    <td> <apex:outputText value="{!a.size}"/></td> 
    <td> <apex:outputText value="{!a.Mydate}"/></td> 
    <td> <apex:outputText value="{!a.OwnerName}"/></td> 
    </tr> 
    </apex:repeat> 
    </tbody> 

    </table> 
<center> <apex:commandButton value="Delete Selected" reRender="PGTable" action="{!deleteSelected}" rendered="{!ShowDelete}"/></center> 
     </apex:pageBlock> 
    </apex:Form> 

Answer 1

Вам нужно будет использовать для доступа к jQuery.noConflict(); JQuery в Visualforce.

Salesforce уже использует другие библиотеки, которые используют глобальную переменную $.

Смотрите Использование Developing Apps with jQuery - jQuery's No Conflict Mode with Visualforce