0

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

Improve this question
3
  • are you receiving any jquery error in console or firebug? Commented Jan 15, 2016 at 11:03
  • Hi nitin, Thanks for your quick reply,i have included the error snapshot above. Commented Jan 15, 2016 at 11:10
  • You are defining jQuery as j$ yet you are using $ in your function. Simply change $ to j$ Commented Jan 17, 2016 at 17:10

4 Answers 4

Reset to default
0

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>
Improve this answer
0
0

Please remove the extra from your code.

<script>

  var j$ = jQuery.noConflict();

<!--remove this script tag-->
 <script>
  $(function() {
    $( "#datepicker" ).datepicker();
});
</script>
Improve this answer
5
  • There also seems to be error in your jquery UI. Please use a correct version of the jquery UI. Copy and save in the static resource from the below link: ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js Commented Jan 15, 2016 at 11:19
  • Hi nitin, I need minified version of jquery-ui-1.8.23.custom.min.js....The link you have provided is it same? Commented Jan 15, 2016 at 11:24
  • Use this then ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js Commented Jan 15, 2016 at 11:25
  • i added the new js file now i am getting different error.I have uploaded the snapshot above Commented Jan 15, 2016 at 12:08
  • remove this line var j$ = jQuery.noConflict(); Commented Jan 15, 2016 at 12:25
0

Use 'jQuery' object reference instead of '$' to avoid conflicts between SFDC and JQuery JS scripts.

Hope this helps you.

Improve this answer
0

it does not work in my enviroment by now . finally I found there are two mistake in my environment firstly the zip file and my resource name not be consistent.enter image description here secondly the url in the visualforce page must include the resourcename like /resourcename/****.js.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.