Solved

jQuery Date picker not working

Posted on 2016-09-08
16
360 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 8
16 Comments
 
LVL 58

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 58

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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

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 58

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 58

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
 
LVL 58

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 58

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 58

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 58

Expert Comment

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

Featured Post

Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logiā€¦
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

630 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