Putting datepicker script in header.php works but kills the js slider.

Gravity Support Forums » Plugin Support » Gravity Forms

stanvdmaarel
Member

Can't get the datepicker script working AND keeping the slider it to work properly. Putting the the script in the header.php does the filtering of the dates in the datepicker. So the
'
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {

$( "#input_1_68" ).datepicker({ defaultDate: '+3d', minDate: '+3d', beforeShowDay: $.datepicker.noWeekends ,gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
});
</script>' seems right.
BUT.... then the js slider on the homepage doesn't appear anymore. Removing the script brings back the slider, but more more date exclusions... The same issue on multiple themes. Been trying for a over a day now to get it working. The Jquery page is great, if you know already js and how to implement it.

Guess some conflicting js...

Posted 12 years ago on Wednesday October 31, 2012 | Permalink
Chris Hajer
Key Master

Please post a link to the page on your site where the form is embedded so we can take a look. Thank you.

Posted 12 years ago on Wednesday October 31, 2012 | Permalink
stanvdmaarel
Member

Its on 'http://www.bmwservicespecialist.nl/' Don't be scared... its in Dutch
The (working) datepicker is located on http://www.bmwservicespecialist.nl/afspraak-maken/ on the bottom ("voorkeurs datum", meaning "preferred date")

Posted 12 years ago on Wednesday October 31, 2012 | Permalink
Chris Hajer
Key Master
On this page:
http://www.bmwservicespecialist.nl/afspraak-maken/

I see the datepicker and the modifications you made to restrict dates. That appears to be working.

On this page:
http://www.bmwservicespecialist.nl/

I see this error:
```
Timestamp: 10/31/2012 12:36:54 PM
Error: TypeError: $.datepicker is undefined
Source File: http://www.bmwservicespecialist.nl/
Line: 73
```
That's because you're trying to apply jQuery to an element which does not exist in the page. If you want to include the script in the head of the page, you can make it load only on this one page by wrapping the code section in a conditional like
```
[php]
<?php if (is_page(2239)) { ?>
<script>
    // jquery to restrict the date range
</script>
<?php } ?>
```
That will ensure your jQuery is output only on page 2239.

The proper way to do it is as I detailed earlier, enqueuing the script whenever the form is called, but you can also conditionally include the script on just this page. If you need the script on another page, you will need to update the conditional.
Posted 12 years ago on Wednesday October 31, 2012 | Permalink
stanvdmaarel
Member

Thx for your (fast!) support.

Works for http://www.bmwservicespecialist.nl/afspraak-maken/ perfectly.
Made a seperate date_restriction.js in /js an added the '// change the 11 here to your form ID
add_action('gform_enqueue_scripts_1', 'enqueue_date_restriction', 10, 2);
function enqueue_date_restriction($form, $is_ajax) {
// the script to restrict the dates is stored in the child theme /js/ subdirectory, and depends on jQuery
wp_enqueue_script('date_restriction', get_stylesheet_directory_uri() . '/js/date_restriction.js', array('jquery'));
}' in functions.php

But.... tried the same solution on http://www.autobedrijfderooy.nl/afspraak-maken/
and that didn't work (weird....)
The date field is input 21 on form 18.

So changed the the form number in date_restriction.js into #input_18_21
and changed the function to '// change the 11 here to your form ID
add_action('gform_enqueue_scripts_18', 'enqueue_date_restriction', 10, 2);
function enqueue_date_restriction($form, $is_ajax) {
// the script to restrict the dates is stored in the child theme /js/ subdirectory, and depends on jQuery
wp_enqueue_script('date_restriction', get_stylesheet_directory_uri() . '/js/date_restriction.js', array('jquery'));
}
'
Somehow the restriction script isn't used on that input (21_18)...

Stan

Posted 12 years ago on Thursday November 1, 2012 | Permalink