Adding jQuery widget to Drupal page result in `$ is not a function`

Question

I'm trying to add a datepicker widget to my form on Drupal.

I've a page with the following code:

<script>
$(function() {
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true
    });
});
</script>
<form action="/scripts/new-customer.php">
<div>Birth date: <input type="text" id="datepicker" name="bday" /></div>
</form>

But unfortunately I get the error in the subject. I tried to write as follows:

<script>
    (function($) {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    })(jQuery);
</script>

But I got the same error the line after.

Unfortunately, I cannot get any further with Drupal documentation.

use jQuery.conflict()

Tamil Selvan C
– Tamil Selvan C

2013-04-20 17:51:01 +00:00
Commented Apr 20, 2013 at 17:51 — Tamil Selvan C
– Tamil Selvan C, Commented Apr 20, 2013 at 17:51
Have you include jQuery and jQuery UI library?

Eli
– Eli

2013-04-20 18:06:12 +00:00
Commented Apr 20, 2013 at 18:06 — Eli
– Eli, Commented Apr 20, 2013 at 18:06

Tamil Selvan C · Accepted Answer · 2013-04-20 18:37:41Z

3

Because of other JavaScript library conflict. use jQuery.noConflict()

var jq = jQuery.noConflict();

jq(function() {
  jq( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

Before initialize

drupal_add_library('system','ui.datepicker')

edited Apr 20, 2013 at 18:37

answered Apr 20, 2013 at 17:52

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zagorax Over a year ago

Same error but with jq instead: TypeError: jq(...).datepicker is not a function.

Tamil Selvan C Over a year ago

have u include jQuery UI library

Tamil Selvan C Over a year ago

drupal_add_library('system','ui.datepicker');

Tamil Selvan C Over a year ago

check the jquery ui datepicker included or not

Zagorax Over a year ago

Thank you very much. drupal_add_library('system','ui.datepicker') solved the problem.

Jai · Accepted Answer · 2013-04-20 18:09:26Z

1

Not sure but this might help:

jQuery(function($) {
  $("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true
  });
});

answered Apr 20, 2013 at 18:09

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

user166560 · Accepted Answer · 2013-04-20 17:51:45Z

0

Drupal is probably using jQuery's noConflict option. Try jQuery("#datepicker").datepicker() instead.

answered Apr 20, 2013 at 17:51

user166560

1 Comment

Zagorax Over a year ago

Unfortunately I get TypeError: jQuery(...).datepicker is not a function.

Behzad-Ravanbakhsh · Accepted Answer · 2013-08-15 23:12:14Z

0

To avoid conflicts with other JS libraries "$" does not make scene in .js files globally. So you should add following code surrounding js codes :

(function($) {
Drupal.behaviors.naturalessenceTheme = {
attach: function(context, settings) {

$('selector').mouseover(function() {
//now working
});

}
};
})(jQuery);

answered Aug 15, 2013 at 23:12

Behzad-Ravanbakhsh

97210 silver badges12 bronze badges

Comments

SmurfXXX · Accepted Answer · 2016-03-15 13:59:06Z

As suggested by Tamil, the following code is working very well:

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/south-street/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> 
<script type="text/javascript" src="api/jquery.ui.datepicker-it.js"></script>
<?php drupal_add_library('system','ui.datepicker') ?>
<script>
    var jq = jQuery.noConflict();
    jq(function() {
        jq.datepicker.setDefaults(jq.datepicker.regional['it']);
        jq("#giornoSel").datepicker(
            { 
                dateFormat: 'dd/mm/yy', 
                altField: '#giorno', 
                altFormat: 'yy-mm-dd', 
                showButtonPanel: true
            }
        );
    });
</script>

Collectives™ on Stack Overflow

Adding jQuery widget to Drupal page result in `$ is not a function`

5 Answers 5

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related