대화 상자 안의 jquery-ui datepicker가로드되지 않습니다.

Question

실제보기로 이동하지 않고 양식이 포함 된 모달 대화 상자를 표시하려고합니다.

필드 중 하나에 날짜 표시기를 추가 할 때까지 모든 것이 올바르게 작동합니다. 내보기/계획/_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 %> 

: 내 application.js에서

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

후 작동! 그래서 나는 무엇을 놓치고 있습니까?

Answer 1

코드에서 datepicker를 만들기위한 줄을 호출하기 전에 함수를 반환합니다 (종료). 과 같이 순서를 변경 :

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

는 희망이 도움이!

EDIT : 실제로 양식을 ajax를 통해로드 한 것을 알게 된 후 해당 행을 호출 할 때 datepicker 요소가 없을 것입니다. 콘텐츠가로드 된 후 실행되는 jQuerys로드 함수에 대한 콜백을 제공해야합니다.

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