Выбор даты внутри модального диалога Jquery-UI

#jquery #ruby-on-rails-3 #jquery-ui

#jquery #ruby-on-rails-3 #jquery-пользовательский интерфейс

Вопрос:

пытаюсь создать форму внутри модального диалога. Но я бы хотел, чтобы эта форма содержала datepickers и другие виджеты из jquery.

На данный момент я делаю это:

В представлении:

 <p><%= link_to "New Event", new_event_path, :remote => true%></p>
  

В application.js

 jQuery(function($) { 

    $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
        xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, '   settings.accepts.html);
      });

    $('a[data-remote]').live('ajax:success', function(event, data, status, xhr){
    $('#modal').html(data);
    $('#modal').dialog({ 
    show: "slide",
    hide: "slide",
    draggable: true,
    modal: true });
    });
    });
  

Если в моем частичном в верхней части страницы я помещаю

 <script>$(function (){  
    $('#event_date').datepicker();  
});
</script>
  

Затем, когда появится модальное диалоговое окно, в моем поле даты появится datepicker, но в идеале я хотел бы поместить этот код внутрь application.js , а не в представлении.

Я новичок в jquery, возможно, поэтому мне трудно это сделать. любые предложения приветствуются!

Ответ №1:

поместите инициализацию выбора даты в open обратный вызов диалога!

 $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
    xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, '   settings.accepts.html);
});

$('a[data-remote]').live('ajax:success', function(event, data, status, xhr){
    $('#modal').html(data);
    $('#modal').dialog({ 
        show: "slide",
        hide: "slide",
        draggable: true,
        modal: true,
        open: function(event, ui){
            $('#event_date').datepicker(); 

        }
    });
});