Undefined is not a function ImpressPages DatePicker

Question

I want to create my own form plugin.I get undefined is not a function error when I add jquery datepicker to _header.php file in impresspages.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Html

<div class="row">
        <div class="col-md-12">
            <form role="form" action="roomjack/create_customer" method="POST" accept-charset="utf-8">
                <div class="form-group">
                    <label for="in">Check In Date :</label>
                    <input type="text" id="in" class="datepicker form-control">
                </div>
                <div class="form-group">
                    <label for="out">Check Out Date:</label>    
                    <input type="text" id="out" class="datepicker form-control">
                </div>
                <button type="submit" class="btn btn-default">Book Now</button>
            </form>
        </div>
    </div>

And here's my script in _footer.php

 <script>
    $(document).ready(function(){
            $( ".datepicker" ).datepicker();
        });
   </script>

score 1 · Answer 1 · answered Mar 31 '15 at 07:56

1

Remove jQuery - it is added by the core by default. Remove this line:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

If you still get issues, try remove jQuery UI, too. Remove this line:

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

answered Mar 31 '15 at 07:56

Audrius Jankauskas

650
4
6

I get : jQuery is not defined when I remove – Basheer Kharoti Mar 31 '15 at 08:00
If that's added by default then why I ge the jquery is not defined error by removing the above lines? – Basheer Kharoti Mar 31 '15 at 08:13
I have no clue what else you've might done. Here's a default installation. Open developer tools and check that jQuery is there - http://9856.cloud.impresspages.org/ – Audrius Jankauskas Apr 01 '15 at 05:42

score 0 · Answer 2 · answered Mar 31 '15 at 07:53

Your code above it's work.. Maybe something wrong with javascript your plugin thus making conflict.

$(document).ready(function(){
            $( ".datepicker" ).datepicker();
        });

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="row">
        <div class="col-md-12">
            <form role="form" action="roomjack/create_customer" method="POST" accept-charset="utf-8">
                <div class="form-group">
                    <label for="in">Check In Date :</label>
                    <input type="text" id="in" class="datepicker form-control">
                </div>
                <div class="form-group">
                    <label for="out">Check Out Date:</label>    
                    <input type="text" id="out" class="datepicker form-control">
                </div>
                <button type="submit" class="btn btn-default">Book Now</button>
            </form>
        </div>
    </div>

Undefined is not a function ImpressPages DatePicker

2 Answers2