Solved

jQuery Date picker not working

Posted on 2016-09-08
16
228 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 56

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 56

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 56

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 56

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 56

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 56

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 56

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 56

Expert Comment

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
alert on input text 2 25
Html split(text) 2 32
output in HTML in Powershell 5 29
How do I split a variable to newline 2 23
Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 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