在我的 Rails 应用程序中，使用 Jquery Datepicker 在一个页面上工作，而不是在另一个页面上工作

Posted 2023-05-09

【中文标题】在我的 Rails 应用程序中，使用 Jquery Datepicker 在一个页面上工作，而不是在另一个页面上工作

【英文标题】：Using Jquery Datepicker works on one page, not on another, in my rails app

【发布时间】：2014-02-26 09:33:27

【问题描述】：

我有一个 Rails 应用程序。在两个不同的 html 页面上，我想使用 jquery 的 datepicker。我第一次使用它，它工作得很好：

在我的 html 中：

<input id="kid_dob" name="kid[dob]" type="text" />

在我的 javascript 中：

(function() 
  jQuery(function() 
    return $('#kid_dob').datepicker(
      changeMonth: true,
      changeYear: true,
      yearRange: '-16:c'
    )(
      dateFormat: 'yy-mm-dd'
    );
  );

  ).call(this);

（这个其实是CoffeeScript写的，我上面展示的JavaScript已经被rails处理过了）。

这很好用：当我点击 kid_dob 文本字段时，日期选择器日历确实会出现。

但是，在另一个页面上我有 html

<input id="reservable_history_start_date" name="reservable_history[start_date]" type="text" />

和javascript（除了kid_dob被reservable_history_start_date替换之外完全相同）

(function() 
  jQuery(function() 
    return $('#reservable_history_start_date').datepicker(
      changeMonth: true,
      changeYear: true,
      yearRange: '-16:c'
    )(
      dateFormat: 'yy-mm-dd'
    );
  );

).call(this);

然而，在第二个例子中，日期选择器日历并没有出现。此外，当我使用选项检查器时，在第一个工作情况下，滚动文本是 input#kid_dob.hasDatepicker，但在不工作情况下，滚动文本只是 input#reservable_history_start_date（没有 hasDatepicker）。

另外，这是我的application.js 文件中的require 语句

//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require bootstrap
//= require_tree .

我做错了什么？！两个html文件之间一定有什么不同，但我很茫然。非常感谢任何提示。

这都是 rails 4.0.0 应用程序的一部分，ruby -v 的输出是 ruby 2.0.0p247（2013-06-27 修订版 41674）[x86_64-linux] 我正在使用 ubuntu 10.04 Lucid Lynx。

提前致谢！

【问题讨论】：

你能发布你的 application.js 文件的内容吗？

好的，已编辑为原帖

重新加载第二页是否有效？ （可能是与 turbolinks 相关的问题）

没有。我还尝试在 application.js 中添加和删除 //= require turbolinks。对不起。

查看浏览器控制台是否存在js错误？

【参考方案1】：

也许您可以尝试将以下函数添加到您的代码中，因为日期选择器可能无法加载。

$(document).on('page:load')
$(document).ready();

【参考方案2】：

我解决了。事实证明，错误控制台 (ctrl+shift+j) 非常有用。有一个空字符串从jquery-rails 中的一些代码传递给getElementById()。通过有条不紊地删除我的application.js 文件中的每一行，直到我只剩下\\= require jquery-rails 行，我可以让那个错误消失。然后我慢慢地一次添加一个库，直到我发现问题所在（因为我确信jquery-rails 不可能有这么简单的错误）。原来我的jquery-rails 和bootstrap 版本有冲突——所以我升级了我的bootstrap 版本，getElementByID() 问题得到修复，现在datepicker 可以在这两种情况下工作。