带有rails的datepicker js奇怪的东西

Posted 2023-05-09

【中文标题】带有rails的datepicker js奇怪的东西

【英文标题】：datepicker js with rails strange thing

【发布时间】：2015-08-30 03:03:33

【问题描述】：

我正在开发我的应用程序，我想在我的表单内的一个字段中显示 datepicker js，但我有一个小问题，希望任何人都可以帮助我。

我的应用程序使用模式引导加载所有表单，例如当我单击“新任务”按钮时，会出现一个模式以添加新任务，因此，在该表单中，我有一个文本字段：日期，我想用 datepicker js 完成。问题是日期选择器永远不会出现，但是如果我在控制台中运行我的 .js 中的代码，日期选择器会正常显示。

我添加了 jquery-ui-rails 并在 application.js 和 application.css 中添加了要求。这是我的代码。

应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require turbolinks
//= require bootstrap.min
//= require_tree .

应用程序.css

 *= require jquery-ui/datepicker
 *= require bootstrap.min
 *= require font-awesome
 *= require sb-admin
 *= require_self
 *= require_tree

我在 app/assets/javascripts 中有一个带有这些代码的文件 custom_script.js

$(document).ready(function($) 
$('.datepicker').datepicker();
);

还有我的 _form.html.haml：

=form_for([@list, @list.tasks.build]) do |t|
=t.label :name, class: 'control-label'
  =t.text_field :name

  =t.label :date,  "Expiration Date", class: 'control-label'
  =t.text_field :date, :class => "datepicker", "readonly" => "readonly"

  =t.label :active, class: "checkbox inline" do
    =t.check_box :active
    %span Active?

  =t.submit class: 'btn btn-primary'

所以，问题是当我单击该 text_field 时，日期选择器不会出现，但是如果我在控制台中运行 custom_script.js 中的代码，日期选择器会正常显示。

我已经尝试使用 page:load，因为我使用了 turbolinks 但它不起作用，所以，我真的不知道我做错了什么。

表单是通过ajax调用加载的，因为“新任务”按钮有remote: true，所以，我认为这是问题所在，但我不知道如何解决。

我希望你能帮助我的人！

【参考方案1】：

这就是正在发生的事情。加载页面后，将调用代码$('.datepicker').datepicker();。当您引入模态时，此代码不会再次运行。尝试添加

javascript:
 $(document).ready(function($) 
   $('.datepicker').datepicker();
 );

到您的my _form.html.haml 底部。这样，加载该文件后，JS就会运行。

或者为了与你已有的保持一致，在你的 js 文件中使用on 方法...

$(document).ready(function($) 
  $(document).on('load','.datepicker',function()
    $('.datepicker').datepicker();
   );
 );

它的作用是现在和永远将日期选择器附加到.datepicker。

【参考方案2】：

实际上，您的 java 脚本代码在您的表单加载之前已经运行。

您必须在 my_form.html.hmal 中调用 datepicker 方法 就像下面的代码。

=form_for([@list, @list.tasks.build]) do |t|
  =t.label :name, class: 'control-label'
  =t.text_field :name

  =t.label :date,  "Expiration Date", class: 'control-label'
  =t.text_field :date, :class => "datepicker", "readonly" => "readonly"

  =t.label :active, class: "checkbox inline" do
    =t.check_box :active
    %span Active?

 =t.submit class: 'btn btn-primary'

:javascript  
  $(document).ready(function($)   
    $('.datepicker').datepicker();
  );

希望，它会正常工作。

【讨论】：

Haml::SyntaxError in Tasks#new Showing /home/santi/activities-list-RoR/app/views/tasks/_form.html.haml 其中第 15 行出现：非法嵌套：嵌套在纯文本是非法的。模板包含的痕迹：app/views/shared/_content_box.html.haml、app/views/tasks/_new_box.html.haml、app/views/tasks/new.js.haml

javascript 标签中有一些语法错误，我已经更新，它在我身边运行良好。