Jquery-ui Datepicker 未显示在 Rails 视图中，出现错误 Uncaught TypeError: $(...).datepicker is not a function

Posted 2023-05-08

【中文标题】Jquery-ui Datepicker 未显示在 Rails 视图中，出现错误 Uncaught TypeError: $(...).datepicker is not a function

【英文标题】：Jquery-ui Datepicker not showing in rails view, got error Uncaught TypeError: $(...).datepicker is not a function

【发布时间】：2020-10-02 13:15:22

【问题描述】：

来自 jquery-ui 的 Datepicker 没有出现在我的视图中。

应用程序.js

require('jquery');
require("jquery-ui/ui/widgets/datepicker");

环境.js

const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin(
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
)
)

environment.toWebpackConfig().merge(
resolve: 
alias: 
'jquery': 'jquery/src/jquery'


);

在我看来

<script>
  $(function() 
    $('#reservation_start_date').datepicker(
      dateFormat: 'dd-mm-yy' );
      $('#reservation_end_date').datepicker(
        dateFormat: 'dd-mm-yy' );
  );

</script>

Chrome 控制台

jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function
Uncaught TypeError: $(...).datepicker is not a function

感谢大家的帮助！

解决了这样做： 我们必须将 jQuery 暴露给 window 对象：

packs/application.js

import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;

【参考方案1】：

yarn add jquery-ui-dist 然后在 alias 方法中添加 'jquery-ui': 'jquery-ui-dist/jquery-ui.js'。

正确配置您的environment.js。 $ 和 jQuery 应该是 jquery 而不是 jquery 的路径。请参阅以下更改。 application.js 中不需要 require('jquery');

new webpack.ProvidePlugin(
$: "jquery",
jQuery: "jquery",
Popper: ["popper.js", "default"]
)

environment.toWebpackConfig().merge(
resolve: 
alias: 
'jquery': 'jquery/src/jquery',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'


);

【讨论】：

谢谢你！但看起来我与 jquery 有某种冲突。我尝试的每个日期时间脚本，jqueri-.ui，flatpicker，引导日期时间都遇到同样的错误

再次感谢。所以我解决了这个问题，只需将 jquery 暴露给窗口对象，在 #packs/application.js import JQuery from 'jquery'; window.$ = window.JQuery = JQuery;