未捕获的ReferenceError：未在Salesforce中定义Jquery

Question

I am adding two jquery one for DataTable and Another for Range Slider, but my Range Slider is not showing. it is giving me this error

Uncaught ReferenceError: Jquery is not defined.

My code is below and It is having two range slider.

<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

You will need to use jQuery.noConflict(); to access jQuery in Visualforce.

Salesforce already use other libraries that make use of the $ global variable.

See Using Developing Apps with jQuery - jQuery's No Conflict Mode with Visualforce