更新

Question

我正在使用Rails 4.2.3和JQuery 1.12。我正在尝试在我的表单上创建一个日期选择器字段，但日期选择器不会出现。我的形式是......

    <%= f.text_field :day, :class => 'datepicker' %>

以下是我的app/assets/javascripts/application.js文件的内容......

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

这是app/assets/javascripts/my_objects.coffee文件中的内容......

jQuery ->
  $('.datepicker').datepicker()

但是当我访问我的页面app/views/my_objects/index.html.erb并点击上面的表单字段时，没有呈现日期选择器，它只是一个文本字段。我还需要做什么或应该检查以使我的日期选择器出现？

修改

在回答给出的答案时，我编辑了我的“./app/assets/javascripts/my_objects.coffee”文件，这正是您指定的内容，但它看起来并不像是包含在页面中。这是我页面的标题部分

                          <!DOCTYPE html>
<html>
<head>
<title>My Application</title>
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-f7b997caf712f3060ad616e13504564b0a9628b98eaf796c98a22c85e4807b99.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/user_exercises.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-0cdb26a7c4fa73ae0385edcbf33f42655e1cf7078850c34ca7bc3a92df7e66b4.css?body=1" data-turbolinks-track="true" />
<script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular-mocks.self-caf46ebee7d161f24a55382f8efda396a5c5c51d1fecb1055514134caa289cb3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular.self-3baa2c9049766d4c7aa7f91d102516dcb1c41428510e6bab431bf04d95e5731d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-1.12.0.min.self-9973772584f113d55d9de9e38305bede3c581ab45775c5ce1fc666aa5bf261a0.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/my_objects.self-58781860b9e8e33e3649547649f23837598175df0c9b8c42ac4e6c6d42738300.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks-track="true"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="g74gSb3nEz2qOL5zPN5Ai/x+2xEafx5be5X1mkILOEAJWFu/lgqMyog6vUGIKeehDmFBj1gDv67qeVI5DUE+yg==" />
</head>
<body>

当我点击文本字段时，日期选择器不会出现，我怀疑这是因为咖啡的东西没有被包含在任何地方。

编辑2：

K，我更新了我的Gemfile，执行了“bundle install”，然后编辑了我的application.js文件以包含ui，所以现在我的标题如下所示......

    <html>
    <head>
      <title>PushUp Moose</title>
      <link rel="stylesheet" media="all" href="/assets/scaffolds.self-f7b997caf712f3060ad616e13504564b0a9628b98eaf796c98a22c85e4807b99.css?body=1" data-turbolinks-track="true" />
    <link rel="stylesheet" media="all" href="/assets/user_exercises.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
    <link rel="stylesheet" media="all" href="/assets/application.self-0cdb26a7c4fa73ae0385edcbf33f42655e1cf7078850c34ca7bc3a92df7e66b4.css?body=1" data-turbolinks-track="true" />
      <script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/core.self-93be4d22eda916787802a64d8f88b52db8a9027d4ccbbc0942625324a7d12d44.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/widget.self-c1602241ddc51216b58391768667068867b8e15b9efc722befcd25771eda6819.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/accordion.self-c95f320275150a94241b004a91e21eef9c5ae9965a793cb3e2475f6078a1670d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/position.self-e693ced4ecfa1a276f0b794f32c1d30d792764b08788bf68ecfa3b388c291333.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/menu.self-7abc1c9401509a7e4fc609b1e461be6fd17e8116e8fda19cc59d05ba79aefb68.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/autocomplete.self-3befc48aba87cead090cfd014562b2771a662ac6d2c8197b24c08b2d9f3d9f2d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/button.self-4d4f21ba77bbf8cc08ae65e2b6329a7a1b952b32c3ba7bffca8313e7e8c93d0c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/datepicker.self-6267be6d4d0f0e8665be3b4d6ac07f40ba23a32aff8eaa5d1bfc00f76a9eeae7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/mouse.self-c513294e8da73f31f84ba3ef11e2a1180a47faea0eb2fea4a53fc26153dd21fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/draggable.self-debcca3d0d5d9afe2fe91a6fd1aebdb41ca0a55f2f6017352e6c02b6d8a6e64c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/resizable.self-60b870565f3cd62982c1907828119bb51f42ec8228d5e23868153edc3abc685c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/dialog.self-5a6c7980dfa3f6b74445b0f4b20eed799ee65363163500ed7f032e603d6b022d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/droppable.self-a7a2b4c2cec8fc176f51e4e4291d92bfd3eec40b6a580b47fc54c16334d52882.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect.self-3acdb29e7da09c8f0195b994d2f04d73bfef50dc539c84fd2c835d964d33e5c1.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-blind.self-ed102209d7aa0b7374f3db8478cc7dcff5f9980d3146e8bf9fbfab959c6d5d8a.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-bounce.self-bfcb9288797ecd234ddeedf4fbc5b4c9de94a4e6d8d44e6faa5b5e9836fad9fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-clip.self-7368e4597c32360b162d264ff8bbd0cf9fb1535eb9b4564e6eb7c1db3c774bf3.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-drop.self-294aaa72126ad9c94d6558cca792eb3716754713aca98f18a9dd7c493150ed92.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-explode.self-68e74dc114a52f3f4d7033e40c39196961bdcf439652daa2e98baa115c7bb44b.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-fade.self-42d542a5253e0a610717460102ee6bee339c656cc188e491d89eb0779043c963.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-fold.self-ad9967f153423916300dbf1104b00f7ad7bbd6a222a0fcc1012ebe251bcb13c8.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-highlight.self-f922b7179ab8ccfa7865141f38865bba0a3d2bdceba7561c27ca14544dbfd996.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-size.self-368aecefa09656a2be5c72dc8e685b120363a3df812134cbd2dd998bafa179fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-scale.self-884a5abcb6d90fcd9f9a071aa8329638184df688afced1b1d3b6be6c69f4dd7f.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-puff.self-93415831093923a70f671d73e8d0b3d94deb37ac7472a036a4add545f565c166.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-pulsate.self-eb107c0d136eccdfbd8a2f0f2ee71e0f6911cb300c6b63cc2fe4f6532e6a9a97.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-shake.self-63bcc14897aac5b84e10690be94d64d5724f864aa14c913b4d1030c461a256ad.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-slide.self-c93054a4a80d1f986760806d81ab067e4a4120bf103337e152ecc24d36e785f6.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-transfer.self-181245634ec522320fc1081f6dbf94fd982f34eefa03555f76817dedfcdea336.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/progressbar.self-a259ff5a2a5e7aef0ec21bda94edd0f6bc1e9821128d901de415956edf212b0d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/selectable.self-42e53fc2f95211314e36a8094c42560f869c207f16d68cfc206aa37201dcdc03.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/selectmenu.self-09dbcac573f0e508194bd9deff254db090889b380d030261857860309c0918e8.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/slider.self-8af8d2a0661743ba88b4cfb99d5c8c874cfa3fc6528ae4e9252366b388def0b7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/sortable.self-df2d80a36f9dfbe0facc596ccd92af83ca50d38e4cd6a84810aaf5d40b8cd181.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/spinner.self-3c8c95a7bc9c877d0f9c16789246bbedda6b8e8fbf5927951babdab775aed02e.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/tabs.self-dc07b44bf1b926c8d28ccd2658e30933881e5329348caf70cf305c3943f6bbd7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/tooltip.self-38f04ac3a6c8fb2391ec6832b68845671cc9013a94371b7eb239478f4835eb73.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui.self-52111578aa54225c9ebfe06f78a62771020ee548bb27d62228ee3f5e6633969d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-1.12.0.min.self-9973772584f113d55d9de9e38305bede3c581ab45775c5ce1fc666aa5bf261a0.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/user_exercises.self-58781860b9e8e33e3649547649f23837598175df0c9b8c42ac4e6c6d42738300.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/application.self-f8806224e027f3e3f0138ea9ce99319e298dfdb323304d1f1be6eae8e8c74724.js?body=1" data-turbolinks-track="true"></script>
      <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="444pM8jiudnL+FYACTvWVBXBuaOc2WfGUmqzBQGy0oxpaFLF4w8mLun6VTK9zHF+594jPd6lxjPDhhSmTvjUBg==" />
    </head>
    <body>i

但是我在刷新页面时得到了这个JS异常，“Uncaught TypeError：$（...）。datepicker不是这一行上的函数”

Answer 1

这可能是Turbolinks问题，由于您在.coffee文件中调用datepicker()的方式，我可以扣除该问题

解决方案是在document.ready事件期间调用您的page:change代码。以下是您可以使用的代码：

app/assets/javascripts/my_objects.coffee

$(document).on 'ready page:load', -> $('.datepicker').datepicker()

更新

您的问题不在于turbo链接，但是无论如何您都会在调用脚本方面遇到turbo链接问题。

确定您的脚本确实包含在内，然后尝试以下操作：

将文件从my_objects.coffee重命名为my_objects.js.coffee，这可能会导致Uglifier编译器出现问题。

为了确保您的文件确实正在运行并且您的问题可能仅限日期选择器，然后运行console.log然后检查浏览器的javascript控制台以查看文本是否已打印出来，我们可以这样做丢弃文件中的代码未被执行

$(document).on 'ready page:load', -> console.log 'This is running!'

如果您可以看到控制台中打印的文本，请检查您的文本字段是否使用.datepicker类正确呈现。

检查您的application.js文件是否唯一，并且没有任何重复项：application.coffee

为避免在开发过程中出现此问题，请在部署前预编译资产：

rake assets:precompile

然后提交更改并部署。

Answer 2

根据您提供的新信息，我认为我已确定您的问题。

您在评论中说，您正在尝试使用jQuery Datepicker，但是您已经在HTML ()和HTML中相应的application.js标记中显示了这些内容。你还没有包括正确的图书馆。

<script>自动不会Datepicker，您必须将jquery.js添加到项目中。

您可以通过打开Javascript调试窗口并重新加载页面来自行确认。在OSX上的Chrome中，您可以通过键入以下命令打开JS调试窗口：⌥⌘J并重新加载页面：⌘R执行此操作时，您应该会看到类似以下内容的错误：jquery-ui.js - 这是因为Chrome可以＆找不到Uncaught TypeError: $(...).datepicker is not a function功能，因为您的项目中没有datepicker。

修复

在您的项目中获取jquery-ui的最简单方法是在jquery-ui中添加此行（如果该行尚未存在）：

Gemfile

然后运行gem 'jquery-ui-rails'来安装gem。

然后，根据宝石的the README，将其添加到bundle install文件中：

app/assets/javascripts/application.js

您需要在//= require jquery-ui行之后。

顺便说一句，您仍然希望更改您运行require jquery的活动，因为@SsouLlesS建议这样做，以便与turbolinks页面加载兼容。

为什么我的Rails文本字段中没有出现日期选择器？

2 个答案:

更新

修复