Question

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

我的应用使用模态引导来加载所有表单，例如。当我点击按钮＆＃34; New Task＆＃34;一个模态出现与添加新任务的表单，因此，在该表单中我有一个文本字段：日期我想用datepicker js完成。问题是，如果我在控制台中运行我的.js中的代码，则日期选择器永远不会出现，但正常情况下会出现。

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

的application.js

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

Application.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时，datepicker不会出现但是如果我在控制台中运行custom_script.js中的代码，则datepicker会正常显示。

我已尝试使用page：load因为我使用了turbolinks但它没有用，所以，我真的不知道我做错了什么。

表单由ajax调用加载，因为按钮＆＃34; New Task＆＃34;有远程：是的，所以，我认为这是问题，但我不知道如何解决它。

我希望你能帮助我的人！

Answer 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。

Answer 2

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

您必须在my_form.html.hmal中调用datepicker方法喜欢以下代码。

sudo sh -c `RFSniffer >> <absolute_path>/codes.txt`

OR

sudo ./RFSniffer | sudo tee <absolute_path>/codes.txt

希望，它会正常工作。

datepicker js用rails奇怪的东西

2 个答案: