jquery-ui datepicker裏面對話框不加載

Question

我試圖有一些模態對話框顯示包含窗體，而不會進入實際的意見。

一切工作正常，直到我想爲其中一個字段添加datepicker。

在我的意見/計劃/ _form我有：

<%= 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(); 

然後它的作品！所以我錯過了什麼？

Answer 1

在您的代碼中，在調用用於創建日期選擇器的行之前，您正在返回（如此退出）該函數。改變這樣的順序：

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(); 
      }); 
     }