对话框内的jquery ui日期选择器未加载

我试图在不进入实际视图的情况下，显示一些包含表单的模态对话框

在我想为其中一个字段添加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' %>

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

现在，就实际表单而言，一切正常，但在选择字段时，它不会显示日期选择器

当窗体加载时，我进入控制台并键入：

<%= 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' %>

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

---

那就行了！那么我遗漏了什么呢？

在代码中，您在调用创建日期选择器的行之前返回（因此退出）函数。按如下方式更改顺序：

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

希望有帮助

编辑：在意识到您实际上是通过ajax加载表单之后，在调用该行时，您的datepicker元素将不在那里。必须向jQuerys加载函数提供回调，该函数在加载内容后执行，如下所示：

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

---

在代码中，在调用用于创建日期选择器的行之前，返回（因此退出）函数。按如下方式更改顺序：

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

希望有帮助

编辑：在意识到您实际上是通过ajax加载表单之后，在调用该行时，您的datepicker元素将不在那里。必须向jQuerys加载函数提供回调，该函数在加载内容后执行，如下所示：

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