模式对话框内的Datepicker试图在模态对话框内创建一个表单的Jquery-UI

Question

。但我希望这个表单包含jquery的datepickers和其他小部件。在我的部分页面我顶

<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> 

然后whe在模式对话框显示出来后，我的日期字段将与datepicker一起显示，但我最好想将这些代码放在application.js中，而不是在视图中。

我是jquery的新手，这也许就是为什么我发现这很难做到。欢迎任何建议！

Answer 1

将datepicker初始化为对话框的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(); 

     } 
    }); 
});