datepicker js与铁轨奇怪的事情

-1

我正在开发我的应用程序，我想在我的窗体内的字段中显示datepicker js，但我有一个小问题，我希望任何人都可以帮助我。datepicker js与铁轨奇怪的事情

我的应用程序使用模态引导来加载所有的形式，f.e.当我点击按钮“新任务”模式出现与表单添加一个新的任务，所以，在这种形式，我有一个文本字段为：日期，我想用datepicker js完成。问题是datepicker从不出现，但如果我在控制台datepicker的.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 /资产/ JavaScript的一个文件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正常显示。

我试过页面：加载，因为我使用turbolinks，但它没有工作，所以，我真的不知道我做错了什么。

表单由ajax调用加载，因为按钮“新任务”有远程：真，所以，我认为这是问题，但我不知道如何解决它。

我希望你能帮助我的人！

来源

2015-06-14 Santiago Baudino

这是发生了什么事。加载页面后，调用代码$('.datepicker').datepicker();。当你介绍模态时，这段代码不会再运行。尝试加入

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

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

或保持它与你已经拥有，使用on方法在你的js文件一致...

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

这里做的事情是，现在和将来它会在日期选择器连接到.datepicker。

来源

2015-06-14 15:45:34 rkamun1

实际上，你的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(); 
    });

希望它能正常工作。

来源

2015-06-14 15:53:24

它不会在线路＃15提出的任务＃新显示/home/santi/activities-list-RoR/app/views/tasks/_form.html.haml工作:( –

Haml的::语法错误：非法嵌套：在纯文本中嵌套是非法的。模板包含的跟踪：app/views/shared/_content_box.html.haml，app/views/tasks/_new_box.html.haml，app/views/tasks/new.js .haml –

在JavaScript标记中出现了一些语法错误，我已更新，它在我身边正常工作。 –

datepicker js与铁轨奇怪的事情

回答

相关问题