Topic: Datepicker in a render inside a form?

Hello,

I have a little problem with a datepicker.
I want to use a datepicker inside a fields_for render.

<%= f.fields_for @elementtorender do |fp| %>
   <% render 'file_to_render', :f =>  fp %>
<% end %>

_file_to_render.html.erb

 <% f.text_fields :mytextfields %>

in my application.js

$(function () {
   $('#???????').datepicker();
});

Whats i should pu on my js file? the ID i get from my textfields are like
parentform_elementtorender_attributes_1312440292302_mytextfields

i have tryed with class, and doesn't worked too!

thanks for your help!

Last edited by neimad (2011-08-04 10:30:23)

Re: Datepicker in a render inside a form?

I would put a class of say 'datepicker_input' with the field and use that as a selector in jQuery.  I.e.

<% f.text_fields :mytextfields, :class => 'datepicker_input' %>

and

$(function () {
   $('.datepicker_input').datepicker();
});

It has the added benefit that it handles all datepicker inputs in the page at once.

Re: Datepicker in a render inside a form?

Hi boomerang, yeah i have tried with a class, and no success. If i put it outside of my render, the datepicker works. inside .. nothing happen!, in my html source i have this when i add class

<input type='text' id='parentform_elementtorender_attributes_1312440292302_mytextfields' class='datepicker_input hasDatePicker' ...... >

but when i click in the textbox, nothing appear.
Thanks

Re: Datepicker in a render inside a form?

I have do a test. I have added this in my controller

@parentelement.renderelement.build

i see my form before i click on add. with that, the datepicker works. but if i click 'add renderelement' link to add a new fields_for, the picker stop working on the second element.

I miss a model/controller setting?

thanks

Re: Datepicker in a render inside a form?

Post your view code, please.

Also, what do you mean by putting in inside/outside your "render"?  What render?

PS: It should work, I routinely use it.

Re: Datepicker in a render inside a form?

ok i post the complet view.

_form.html.erb

<%= nested_form_for @floor_space, :html => {:multipart => true} do |f| %>
  <%= f.error_messages %>

  <p>
    <%= f.label :footage %><br />
    <%= f.text_field :footage, :class=>'workstart' %>  //good 
  </p>
 

  <p>

  <%= f.label 'Renovation' %>
  <%= check_box_tag :renovation, '1' %> 
  </p>
  <div class='haveRenovation' style='display:none;'>
  <%= f.fields_for :renovations do |reno| %>
    <%= render 'renovation_form', :f => reno %>
  <%end %>
  <%= f.link_to_add "Add Renovations", :renovations %>
  </div>

  <p><%= f.submit %></p>
<% end %>

_renovation_form.html.erb

<p class="renovations">
<%= f.label :work_start %>
<%= f.text_field :work_start, :class => 'workstart' %><br/> // bad
<br/>
<%= f.label :work_end %>
<%= f.text_field :work_end' %><br/><br/>
<%= f.label :novation_value %>
<%= f.text_field :renovation_value %><br/><br/>
<%= f.label :note %>
<%= f.text_area :note, :rows => 3 %>
</p>

application.js

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
//  $('#work_start').datepicker();
$(function() {
  $(".workstart").datepicker();

});

when i say outside / inside render i mean the _renovation_form.html.erb. inside that file, no jquery work. in my _form.html.erb all jquery work.

thanks!

Re: Datepicker in a render inside a form?

It's because it is originally hidden by the "<div class='haveRenovation' style='display:none;'>" div and the datepicker does not play nice with that.  There are a few things you can do:

  • unhide the inner form

  • unhide the inner form and hide it with jquery right after the datepicker is initialized (I think datepicker is willing to work that way)

  • only initialize the inner datepicker in the action which unhides the inner form

  • come up with sg more intelligent smile

Re: Datepicker in a render inside a form?

come up with sg more intelligent?

i have tried too with unhide the form.
The problem come after when i click the Add Renovations.
don't know why, because the class are the same in both.. First element unhided that works now, but after a Add Renovations, the second textbox have no action.

I have tried with a simple click function with alert, and nothing happen with the second textbox.

thanks.

Re: Datepicker in a render inside a form?

Isn't it that link_to_add is an AJAX stuff that adds a new renovation_form to the page?  Because for these injected items the $(function ...) jQuery does not get run; trying running $(".workstart").datepicker(); for these yourself.

I suggest you use some JS debugger (Firebug for FF, Chrome has a developer toolset, IE also has its own, I'm not on par with Safari and Opera in this regard); it makes life so much simpler with AJAX and the like.  Place a breakpoint at  $(".workstart").datepicker() and see if it gets run or not.

Re: Datepicker in a render inside a form?

Hi boomerang, sorry for my late answer.
I tried with firebug and script debug.

if i add a nre render with link_to_add ... the jquery don't work anymore. but if in firebug i enter $('.myclass').datepicker();
that start to work, if i and a another render, the new render dont have jquery, i need to write again $('.mycall').datepicker(); to be able to see the datepicker.

It looks like the jquery doesn't refresh at each link_to_add.

how i can manage that?

thanks.