将jQuery小部件添加到Drupal页面会导致`$不是函数`

时间:2013-04-20 17:44:02

标签: jquery drupal

我正在尝试在Drupal上的表单中添加一个datepicker小部件。

我有一个包含以下代码的页面:

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

但遗憾的是我收到了主题中的错误。我试着写如下:

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

但我后面的行也有同样的错误。

不幸的是,我无法继续使用Drupal文档。

5 个答案:

答案 0 :(得分:3)

由于其他JavaScript库冲突。使用jQuery.noConflict()

var jq = jQuery.noConflict();

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

在初始化之前

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

答案 1 :(得分:1)

不确定,但这可能会有所帮助:

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

答案 2 :(得分:0)

Drupal可能正在使用jQuery's noConflict option。请改为jQuery("#datepicker").datepicker()

答案 3 :(得分:0)

为避免与其他JS库冲突,“$”不会全局生成.js文件中的场景。 所以你应该在js代码周围添加以下代码:

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

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

}
};
})(jQuery);

答案 4 :(得分:0)

正如泰米尔人所建议的那样,以下代码运作良好:

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