Datepicker dans la boîte de dialogue modale Jquery-UI

Question

en essayant de créer un formulaire dans une boîte de dialogue modale. Mais je voudrais que ce formulaire contienne des datpickers et d'autres widgets de jquery.

En ce moment je fais ceci:

De l'avis:

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

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

Si dans ma partie en haut de la page I mettre

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

Puis whe n le dialogue modal apparaît, mon champ de date apparaîtra avec datepicker, mais je voudrais idéalement mettre ce code dans application.js, plutôt que dans la vue.

Je suis nouveau à jquery, ce qui est peut-être pourquoi je trouve cela difficile à faire. Toutes les suggestions sont les bienvenues!

Answer 1

mettre l'initialisation datepicker dans le rappel open de la boîte de dialogue!

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

     } 
    }); 
});