0

実際のビューに移動せずに、フォームを含むいくつかのモーダルダイアログを表示させようとしています。

フィールドの1つにdatepickerを追加するまでは、すべて正常に機能します。

私の見解/計画/_フォームで私は持っています：

<%= simple_form_for [@customer, @plan], :remote => true do |f| %>
  <fieldset>
    <%= f.input :price  %>
    <%= f.input :guests %>
    <%= f.input :start_date, :as => :string, :input_html => { :class => 'date_picker' } %>
    <%= f.input :end_date, :as => :string, :input_html => { :class => 'date_picker' } %>
    <div class="form-actions">
      <%= f.button :submit %>
    </div>
  </fieldset>
<% end %>

私は別の視点からこれを呼び出します：

<%= link_to 'New Plan', new_customer_plan_path(session[:customer_id]), :class => 'btn btn-primary', :remote => true, :id => 'create_plan_link' %>

私のapplication.jsには次のものがあります。

$(document).ready(function() {
        $('#create_plan_link').click(function(e) {
var url = $(this).attr('href'); 
$('#modal').dialog({
       title: "New Plan",       
       draggable: true,
       resizable: false,
       modal: true,
       width:'auto',
       open: function(event, ui){
             return $(this).load(url + ' #content');
            $("input.date_picker").datepicker();}               
});
});
    });

これで、実際のフォームに関してはすべて正常に機能しますが、フィールドを選択したときに日付ピッカーが表示されません。

フォームが読み込まれ、コンソールに移動して次のように入力すると、次のように入力します。

$("input.date_picker").datepicker();

その後、それは動作します！だから私は何が欠けていますか？

4

1 に答える 1

5

コードでは、日付ピッカーを作成するための行を呼び出す前に、関数を返します（つまり終了します）。次のように順序を変更します。

   open: function(event, ui){
         $("input.date_picker").datepicker();
         return $(this).load(url + ' #content');
        }

それが役に立てば幸い！

編集：実際にajaxを介してフォームをロードしていることに気付いた後、その行を呼び出すときに日付ピッカー要素はそこにありません。jQuerysロード関数にコールバックを提供する必要があります。このコールバックは、コンテンツが次のようにロードされた後に実行されます。

   open: function(event, ui){
         return $(this).load(url + ' #content', function() {
                 $("input.date_picker").datepicker();
             });
        }
于 2012-04-25T07:58:13.353 に答える