Solved

jQuery Date picker not working

Posted on 2016-09-08
16
77 Views
Last Modified: 2016-09-22
Hi,

I'm trying to get jquery datepicker to work on this site but I cant get it to pop up, I get an error saying datepicker is not a function, even though I have loaded the jquery ui script.

The url is: http://www.quotechief.com/testquote/
0
Comment
Question by:Alex Mac
  • 8
  • 8
16 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41789451
Take a look at your source on line 23
$(function() {
    jQuery "#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
  });

Open in new window

   
Specifically the jQuery "#dob"). bit - that is not valid.

Should be jQuery("#dob) if you were using the no-conflict option of jQuery - but in the next line you are using the $ - so maybe standardise on that.

Also you don't have to put each of those datepicker bindings in their own $(function) - you can just use one
$(function() {
  $("#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
  $( "#residentSince" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
  $( ".convictionDate" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
});

Open in new window

0
 

Author Comment

by:Alex Mac
ID: 41789511
Hi Julian,

Thanks for your response, you caught me while I was changing a few things round to try to get it to work, i have changed the code to your suggestion and I am getting the original error saying .datepicker is not a function.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41789679
Take a look at your code.

1. jQueryUI is declared before jquery
2. the JQueryUI script is commented out
3. The JQuery code is commented out
	 <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> -->
  <!--<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>-->
 <script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script> 
 <!--  <script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"   integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="   crossorigin="anonymous"></script>-->
  <!--<link rel="stylesheet" href="http://wwww.quotechief.com/wp-content/themes/Avada/style.css">-->
  <script type="text/javascript">
/* jQuery(document).ready(function() {
jQuery(function() {
  jQuery("#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
  jQuery( "#residentSince" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
  jQuery( ".convictionDate" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
});
  });*/
  </script>

Open in new window

I took your code and moved the jQueryUI declaration, uncommented it and the script and added some input's to it - it worked first time. Code here
<!doctype html>
<html>
<head>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> -->
<script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script> 
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!--  <script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"   integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="   crossorigin="anonymous"></script>-->
<!--<link rel="stylesheet" href="http://wwww.quotechief.com/wp-content/themes/Avada/style.css">-->
<script type="text/javascript">
 jQuery(document).ready(function() {
    jQuery(function() {
    jQuery("#dob" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "-16Y", minDate: "-120Y", yearRange: "1800:2000" });
    jQuery( "#residentSince" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
    jQuery( ".convictionDate" ).datepicker( {changeMonth: true, changeYear: true, dateFormat: "dd-mm-yy", maxDate: "0" });
  });
});
</script>
</head>
<body>
Resident :<input type="text" id="residentSince" /><br/>
DOB <input type="text" id="dob" /><br/>
CD <input type="text" class="convictionDate" /><br/>
</body>
</html>

Open in new window

You can see it working here
0
 

Author Comment

by:Alex Mac
ID: 41789755
Yes I see thanks.

So how do I fix it? Do I need to stop wordpress loading javascript files in the footer?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41789783
No, you need to fix the problems.

1. Don't comment out your scripts or your JQuery code
2. Move the JQueryUI <script> below the JQuery script
0
 

Author Comment

by:Alex Mac
ID: 41790080
Hi I have now disabled all other jquery libraries being loaded and style sheets in case there was a conflict but I'm still getting nothing, any ideas what it could be?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41790190
I know exactly what the problem is - as shown in the previous post. I don't know how you have configured your WordPress - that is a separate question. The question was why is your datepicker not working - the answer is your scripts were commented out and in the wrong order and your jQuery was commented out.

Somewhere you have included scripts in your template - either through the wp_head hook or preferably through wp_register_scripts and wp_enque_script - maybe you are hardcoding in the template - I don't know so I cannot answer your question.

How have you configured your template? Someone / something commented out that code - I doubt it was WP.
0
 

Author Comment

by:Alex Mac
ID: 41790217
I commented out the code at the top and included it later on in the footer as some people on forums have suggested that is the better way of including javascript. But it made no difference.

I have now disabled all the wp_enque scripts in the functions.php and hardcoded the jquery and jquery ui at the top of the template along with the javascript underneath, but still I am getting nothing, I really don't understand why this is.

 I have done this many times on other wordpress sites but this really has me stumped. If it makes any difference this site is using the avada theme.

Thanks again for your help
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41790363
Ok I found the problem

your input has the class "hasDatepicker" - that is used by jQueryUI to determine if a datepicker has already been assigned.

Remove the class hasDatePicker from your <input> that are bound to the datepicker and it should work fine.
1
 

Author Comment

by:Alex Mac
ID: 41790397
Haha that's great. Thanks for that, I did wonder at one point why that was there but as it was in the previous forms I've done I thought I had to have that class included.

All sorted now, thanks for your help!
0
 

Author Closing Comment

by:Alex Mac
ID: 41790398
Great help!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41790436
You are welcome.
0
 

Author Comment

by:Alex Mac
ID: 41810925
Hi I've got another issue with the date picker on http://www.quotechief.com/testquote/ The date picker works on all fields but when you click on "Add Another Conviction" the datepicker doesn't work on the generated date fields, I've used a class selector for the jquery so it should work on the generated fields.

Any idea why it doesn't work?

Thanks
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41810968
When you bind the datepicker to its control like so
$('.class').datepicker();

Open in new window

The above essentially gets an array of all the elements that match .class and then binds those to the datepicker plugin. Anything that is created after that will not be bound because it's creation is post the binding process.
So you are going to have to re-bind your datepicker after adding the dynamic elements
Either by targeting that datepicker specifically or a general rebind of all the datepicker's.

Something like this might work
$('.convictionDate').datepicker()

Open in new window


Right after you do the append of the new content.

Here is a simple sample that demonstrates the concept
1
 

Author Comment

by:Alex Mac
ID: 41810993
Great help, thanks again!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41811395
You are welcome.
1

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
using web browser with BING 40 89
Jquery Typeahead - where is the source set? 1 17
cookies analysis tools 2 29
gif overlay 3 32
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to dynamically set the form action using jQuery.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now