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與鐵軌奇怪的事情

回答

相關問題