【问题标题】:Why datepicker does not show up in Rails 3 form为什么 datepicker 没有以 Rails 3 形式显示
【发布时间】:2011-11-26 13:15:40
【问题描述】:

我无法弄清楚为什么 jQuery datepicker 没有出现,即使我的应用程序上运行了 jQuery。这是我所做的:

我得到了一个包含

的 Rails 表单
  <div id="born_in">
   <%= f.text_field :born_in %><br />
   </div>

我在 application.html.erb 的头部包含了 jQuery、jQuery-UI、CSS

<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" %>

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js",
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" %>     

我还有application.js,说明我的选择器不是nil:

alert($("#born_in").length)  

返回 1

我试过了:

$("#born_in").datepicker("show")

但它没有显示任何内容。 那么为什么我没有看到 datepicker()?此版本的 jquery-UI 的 datepicker 是否存在错误?我应该如何测试这个功能是否包含在我的应用程序中?

谢谢。

【问题讨论】:

    标签: jquery ruby-on-rails ruby-on-rails-3 debugging datepicker


    【解决方案1】:

    它是事先初始化的吗?如,你打电话了吗

    $("#born_in").datepicker();
    

    该代码之前的某个位置?如果没有,则不需要“显示”,只需运行不带参数的方法即可。

    【讨论】:

    • 嗨 Kennypu,我确实在 application.js 中调用了它(它包含在 application.html.erb 的头文件中)。但是日期选择器没有出现。
    【解决方案2】:

    Rails 决定在 id 中添加带有控制器名称的表单输入。 例如,我的控制器名称是“Testjqueryui”,在 _form 部分中,生成了以下(很像你的):

    <%= f.text_field :date %>
    

    生成的 HTML(在嵌入式 ruby​​ 运行后)的 id 为:“testjqueryui_date”。

    所以,我的建议是检查生成的字段的 id,因为它可能带有控制器的名称。

    我把它放在 application.js 文件中:

    $(function() {
        $( "#testjqueryui_date" ).datepicker();
    });
    

    希望这会有所帮助!

    【讨论】:

    • 谢谢,Fishz。我认为如果您指定
      那么 jQuery 可以正确识别该元素(即,无需为对象名称添加前缀)
    • @AdamNYC:也许我不清楚。您最初问题中的
      是不必要的。日期选择器附加到表单输入(文本框)。该文本框的 ID 是需要在 application.js 文件中调用的。我相信,由于您使用的是标准 rails 表单助手&lt;%= f.text_field :born_in %&gt;,因此创建的 text_field 将具有 _born_in 的 id。您的测试,alert($("#born_in").length) 肯定会返回 true,因为它针对您的领域周围不必要的 div。希望这会有所帮助。
    • 感谢您的跟进。在尝试明确指定 div id 之前,我确实尝试了您建议的 $(#my_class_born_in) 方式。两种方式,日期选择器都不会显示。 :(
    • @AdamNYC:嗯,这很有趣。您确定浏览器正在加载所需的 javascript 文件吗?
    • 通过在 app/views/layouts/application.html.erb 中包含 &lt;script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" &gt; 解决了我的问题
    【解决方案3】:

    您只需要使用 jQuery 选择器来查找您希望显示为日期选择器的所有字段。一种方法是为 datepicker 字段提供一个特定的 css 类,如下所示:

    <div id="born_in">
        <%= f.text_field :born_in, :class => "date" %>
    </div>
    

    然后,在您的 application.js 文件中(或您想要的位置),只需写:

    $(function() {
        $('input.date').datepicker();
    });
    

    您也可以使用特定元素的 id 来代替 css 类。你知道要求。 希望这是有用的。

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签