次のように定義された JQueryUI 日付ピッカーがあります。
$(function() {
$(".visit_date").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "yy-mm-dd"
});
});
Datepicker テキスト ボックスを生成するビュー コードは次のとおりです。
<td><%= f.label :visit_date %></td>
<td><%= text_field_tag :visit_date, @visit.visit_date, :class => 'visit_date'
ビューは、レンダリングされると、次のようにタグ間で生成されます。
<div id="action_window">
(rendered HTML to be acted on by user)
</div>
Javascript セレクター「.visit_date」がこのビューに接続されないのはなぜですか? つまり、「action_window」タグがなくても、以前は機能していました。私の考えでは、「.visit_date」はクラス「visit_date」を持つものと一致すると考えていました。
====================== 2012 年 11 月 7 日に更新。Javascript コード:
$(function() {
$("#visit_date").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "yy-mm-dd"
});
});
ユーザーがボタンを押した元の場所:
<%= link_to "Add Visit", new_client_visit_path(@client), :remote => true, :class => "btn btn-primary btn-large" %>
VisitsController では:
respond_to do |format|
format.html
format.js { }
end
ビュー/訪問/new.js.erb:
$('#action_window').html('<%= escape_javascript render(:partial => "new") %>');
$('#action_window').show;
(#action_window は Client index ビューの div です)
ビュー/訪問/_new.html.erb:
<%= render "form" %>
<%= link_to "Cancel", @client, :class => "btn btn-primary btn-large" %>
ビュー/訪問/_form.html.erb:
%= form_for [@client, @visit] do |f| %>
<td><%= text_field_tag :visit_date, @visit.visit_date, :class => 'visit_date' %>
おそらく、「新しい訪問」ビューを作成するHTMLがレンダリングされ、クラスに「hasDatepicker」が追加されないと、JQueryUIがそれを関連付けることができないため、Datepickerを機能させることができませんでした。