Question

I have a JQueryUI datepicker defined as follows:

$(function() {
  $(".visit_date").datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "yy-mm-dd"
  });
});

The view code which produces the Datepicker text box is

<td><%= f.label :visit_date %></td>
<td><%= text_field_tag :visit_date, @visit.visit_date, :class => 'visit_date'

and the view, when rendered, is generated between tags like this:

<div id="action_window">
   (rendered HTML to be acted on by user) 
</div>

Why doesn’t the Javascript selector “.visit_date” hook up with this view? In other words, without the “action_window” tags it used to work. My thinking was that “.visit_date” would match anything with class “visit_date”.

======================
UPDATE on 11/7/2012. Javascript code:

$(function() {
  $("#visit_date").datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "yy-mm-dd"
});   

});

The original place where the user pushes the button:

<%= link_to "Add Visit", new_client_visit_path(@client), :remote => true, :class => "btn btn-primary btn-large" %>

In VisitsController:

respond_to do |format|
  format.html
  format.js { }
end

In views/visits/new.js.erb:

$('#action_window').html('<%= escape_javascript render(:partial => "new") %>');
$('#action_window').show;

(#action_window is a div in the Client index view)

In views/visits/_new.html.erb:

<%= render "form" %>
<%= link_to "Cancel", @client, :class => "btn btn-primary btn-large" %>

In views/visits/_form.html.erb:

%= form_for [@client, @visit] do |f| %>
<td><%= text_field_tag :visit_date, @visit.visit_date, :class => 'visit_date' %>

I have not been able to get the Datepicker to work, presumably because the HTML creating the “New Visit” view is rendered, and somehow JQueryUI can’t associate it without that “hasDatepicker” thing added to the class.

Answer 1

When you dynamically add an element you want to be a date picker, and the original static page contains say this jquery to make some elements datepicker:

$(‘.visit_date’).datepicker();

When the new element get’s added, and it has class=’visit_date’, it won’t be a datepicker UNLESS you call jquery’s datapicker on it.

So if you are using new.js.erb to add a dynamic datepicker element, you could do this:

$('#action_window').html('<%= escape_javascript render(:partial => "new") %>');
$('.visit_date').datepicker();