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?
    – Nitin
    Jan 15, 2016 at 11:03
  • Hi nitin, Thanks for your quick reply,i have included the error snapshot above.
    – Learner_sfdc
    Jan 15, 2016 at 11:10
  • You are defining jQuery as j$ yet you are using $ in your function. Simply change $ to j$
    – Eric
    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
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.

Not the answer you're looking for? Browse other questions tagged .