Question

I’m trying to have some modal dialogs show up containing the forms, without going into the actual views.

Everything works fine until i want to add datepicker for one of the fields.

In my views/plans/_form i have:

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

which i call from another view:

<%= link_to 'New Plan', new_customer_plan_path(session[:customer_id]), :class => 'btn btn-primary', :remote => true, :id => 'create_plan_link' %>

in my application.js i have:

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

Now, everything works fine with regards to the actual form, but it doesn’t show the datepicker when selecting the fields.

When the form loads and I go into the console and type:

$("input.date_picker").datepicker();

then it works! so what am I missing?

Answer 1

In your code, you are returning (so exiting) the function before calling the line for creating the datepicker. change the order like so:

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

Hope it helps!

EDIT: After realizing that you actually load the form via ajax, your datepicker elements will not be there when calling that line. You must supply a callback to jQuerys load function, which gets executed after the content has been loaded like this:

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