Question

trying to create a form inside a modal dialog. But i would like this form to contain datepickers and other widgets from jquery.

At the moment I’m doing this:

In the view:

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

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

If in my partial at the top of the page I put

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

Then when the modal dialog shows up, my date field will appear with datepicker, but I would ideally want to put this code inside application.js, rather than in the view.

I’m new to jquery, which is maybe why i’m finding this difficult to do. any suggestions are welcome!

Answer 1

put the datepicker initializing in the open callback of the dialog!

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

        }
    });
});