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> 
