[SalesForce] Jquery included as static resource is not working in visualforce page

I am trying to use jquery datepicker in the page.I have zipped the necessary file jquery-1.8.0.min.js,jquery-ui-1.8.23.custom.min.js and jquery-ui-1.8.7.custom.css and uploaded it as static resource. But the datepicker is not working.

I have named the file as JqueryTest in static resource.The main zipped folder name is JqueryFile–>The JqueryFile has 2 foldes–>js and css.

Visual force page

  <apex:page controller="check_Format" sidebar="true" showChat="true" >
 <head>
 <apex:includeScript value="   {!URLFOR($Resource.JQueryTest,'JqueryFile/js/jquery-1.8.0.min.js')}" />
 <apex:includeScript value="{!URLFOR($Resource.JQueryTest,'JqueryFile/js/jquery-ui-1.8.23.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.JQueryTest,'JqueryFile/css/jquery-ui-1.8.7.custom.css')}" />
 </head>
 <script>

  var j$ = jQuery.noConflict();


 <script>
  $(function() {
    $( "#datepicker" ).datepicker();
});
</script>
<apex:form id="theForm">

 <body>
 <div class="demo">
  <p>Date: <input id="datepicker" type="text" /></p>
  </div>
 </body>


 </apex:form>
 </apex:page>

Where i am doing wrong?Please suggest.

In console i am getting the following error

enter image description here

Thanks.

error:-$ is not a function

enter image description here

Best Answer

Use below code to implement jquery picklist and

I have added static resource in my google drive Just download and add into your static resource.. make sure your static resource name JQueryTest

Download link

https://drive.google.com/file/d/0B5PMI0wQcOqlcVcwczZMWGFiLUk/view?usp=sharing

 <apex:page  sidebar="true" showChat="true" >
 <head>
      <apex:stylesheet value="{!URLFOR($Resource.JQueryTest,'/css/jquery-ui.css')}" />
      <apex:includeScript value="   {!URLFOR($Resource.JQueryTest,'/js/jquery-1.10.2.js')}" />
      <apex:includeScript value="{!URLFOR($Resource.JQueryTest,'/js/jquery-ui.js')}" />

 </head>
 <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
<apex:form id="theForm">

 <body>
 <div class="demo">
  <p>Enter Date: <input type="text" id="datepicker-13"/></p>
  </div>
 </body>


 </apex:form>
 </apex:page>

enter image description here

Use this tutorial http://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm

Change the Background Color of jQuery Datepicker

Use this css.. And change color based on your preference

<style type="text/css">
.ui-datepicker {
    background: #333;
    border: 1px solid #555;
    color: #EEE;
}
</style>
Related Topic