1

次のように定義された 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を機能させることができませんでした。

4

2 に答える 2

1

クラスセレクターに関するあなたの仮定は正しいと思います。私の経験では、datepicker は、含まれる div に関係なく、選択したクラス/ID に接続する必要があります。私はこれらのことをチェックします:

  1. 誤って 2 つの jQuery タグを使用していないことを確認してください。私はそれをしましたが、日付ピッカーは機能しません。

  2. このコードの前に壊れている JavaScript コードはありますか? 最初のエラーが発生するたびに JS の実行が停止すると思います。Chrome でページを開き、右クリックして要素を検査し、コンソールを表示して JS エラーがあるかどうかを確認します。

これらの提案は、Rails コードが class="visit_date" を含む入力タグを生成しているという前提に基づいています。

于 2012-11-05T21:51:52.403 に答える
0

日付ピッカーにしたい要素を動的に追加する場合、元の静的ページには、いくつかの要素を日付ピッカーにするために次のjqueryが含まれています。

$('.visit_date').datepicker();

新しい要素が追加され、class='visit_date' が含まれている場合、jquery の datapicker を呼び出さない限り、datepicker にはなりません。

したがって、new.js.erb を使用して動的な datepicker 要素を追加する場合は、次のようにすることができます。

$('#action_window').html('<%= escape_javascript render(:partial => "new") %>');
$('.visit_date').datepicker();
于 2012-11-07T18:26:16.413 に答える