Change text_field_tag class

in my booking / _form I have the following input fields : (startdate and
endate)

Booking Start Date
<%= text_field_tag('startdate', @startdate, {:class => @startdateclass, :readonly => "readonly", :maxlength => "25"} ) %> <%= observe_field("startdate", :frequency => 0.5, :url => {:controller => 'booking' , :action => 'startdateChanged' }, :update => 'enddate', :with => "'input='+$('startdate').value ") %>
Booking End Date
<%= text_field_tag('enddate', @enddate, {:class => @enddateclass, :readonly => "readonly", :maxlength => "25"} ) %>
---------- the observe_field detects a new startdate selection from the calendar handled by startdateChanged action (calculating an endingdate 10 days after) in the booking_controller def startdateChanged pd = ParseDate::parsedate(@params["input"]) tl = Time.local(pd[0], pd[1], pd[2]) @enddate = (tl+(84600*10)).strftime("%d/%m/%Y") render :update do | page | page['enddate'].value = @enddate @enddateclass = "format-d-m-y range-low-" + (tl+(84600*10)).strftime("%d-%m-%Y") end end

the endingdate value is correctly set and displayed but the :class =>
@enddateclass is not modified…
why ?

Kad K. wrote:

 render :update do | page |
   page['enddate'].value = @enddate
   @enddateclass = "format-d-m-y range-low-" + 

(tl+(84600*10)).strftime("%d-%m-%Y")

the endingdate value is correctly set and displayed but the :class =>
@enddateclass is not modified…
why ?

You probably want

page['enddate'].className = ...


We develop, watch us RoR, in numbers too big to ignore.

Mark Reginald J. wrote:

Kad K. wrote:

 render :update do | page |
   page['enddate'].value = @enddate
   @enddateclass = "format-d-m-y range-low-" + 

(tl+(84600*10)).strftime("%d-%m-%Y")

the endingdate value is correctly set and displayed but the :class =>
@enddateclass is not modified…
why ?

You probably want

page[‘enddate’].className = …

thanks Mark, I just test it
that’s actually I would like …
but it it doesnt’ update the class name (which is still the initial one)

Kad K. wrote:

Mark Reginald J. wrote:

page[‘enddate’].className = …

thanks Mark, I just test it
that’s actually I would like …
but it it doesnt’ update the class name (which is still the initial one)

Kad, I just tried this out myself, and the class attribute was set
properly.
Can you post the relevant sections of your controller and view as they
now stand? And how are you determining that the class has not changed?


We develop, watch us RoR, in numbers too big to ignore.

Kad K. wrote:

<%= observe_field(“startdate”, :frequency => 0.5, :url => {:controller
=> ‘booking’ , :action => ‘startdateChanged’ }, :update => ‘enddate’,

Try getting rid of the :update => ‘enddate’ option. It shouldn’t be
used with RJS.


We develop, watch us RoR, in numbers too big to ignore.

Mark Reginald J. wrote:

Kad, I just tried this out myself, and the class attribute was set
properly.
Can you post the relevant sections of your controller and view as they
now stand? And how are you determining that the class has not changed?

it’s quite tricky… I am using the unobtrusive Date-Picker Widgit ( see
demo frequency-decoder.com) from Brian
McAllister (he went on vacation yesterday…), as you can see in the
demo, the css class is used to drive the js (I am not js aware but
Brian seems to be very good in it…)

I need to capture a StartBookingDate and an EndBookingdate, the
EndBookingdate cannot be selected before the StartBookingDate, that’s
why I need to link both.
No problem on initial display (new) I cannot select an EndBookingdate
before the StartBookingDate.

When the StartBookingDate change (observe-field in the form) the
controller changes the EndBookingdate value (OK, text-field is modified)
and should modify the class : range-low-xx … of the datepicker
calendar…
Looking into the FX DOM, I can see that the class is changed, but it’s
not reflected in the source code of the page and EndBookingdate
selection in calendar did not change…

— Booking controller
def new
t = Time.now
@startdate = t.strftime(“%d/%m/%Y”)
@enddate = (t+(84600)).strftime(“%d/%m/%Y”)
@startdateclass = “format-d-m-y”
@enddateclass = “format-d-m-y range-low-” +
(t+(84600)).strftime(“%d-%m-%Y”)
end

— Booking new.rhtml
<%= start_form_tag :action => ‘create’ %>
<%= render :partial => ‘form’ %>
<%= submit_tag “Create” %>
<%= end_form_tag %>

— Booking _form.rhtml

text_field_tag('startdate', @startdate, {:class => @startdateclass, :readonly => "readonly", :maxlength => "25"} ) %> <%= observe_field("startdate", :frequency => 0.5, :url => {:controller => 'booking' , :action => 'startdateChanged' }, :update => 'enddate', :with => "'input='+$('startdate').value ") %>
<%= text_field_tag('enddate', @enddate, {:class => @enddateclass, :readonly => "readonly", :maxlength => "25"} ) %>

— Booking controller
def startdateChanged
pd = ParseDate::parsedate(@params[“input”])
tl = Time.local(pd[0], pd[1], pd[2])
# endate must be = startdate + 10 days
@enddate = (tl+(8460010)).strftime(“%d/%m/%Y”)
# range-low of calendar picker must be= startdate + 10 days
@enddateclass = “format-d-m-y range-low-” +
(tl+(84600
10)).strftime(“%d-%m-%Y”)
render :update do | page |
page[‘enddate’].value = @enddate
page[‘enddate’].className = @enddateclass
end
end

Mark Reginald J. wrote:

Kad K. wrote:

<%= observe_field(“startdate”, :frequency => 0.5, :url => {:controller
=> ‘booking’ , :action => ‘startdateChanged’ }, :update => ‘enddate’,

Try getting rid of the :update => ‘enddate’ option. It shouldn’t be
used with RJS.

did it…
Interesting… initial display => startdate=today (29/07/206)
enddate=today+1(30/07/2006)
I pickup from the calendar a new stardate= 09/08/2006,
the startdate textfield display = 09/08/2006… startdateChanged is
executed
the endate textfield display correctly = 18/08/2006 (stardate+10days)

BUT the page source is not modified !

if I click on the calendar picker, the current date is correctly indicated (small blue triangle) as 09/08/2006 for startdate and 18/08/2006 for endate....

at the end of the fd-datepicker.js :
datePickerController.addEvent(window, ‘load’,
datePickerController.create);
I am not very good in js, but using RJS, the window is not reloaded…
right, so ?

kad

Kad K. wrote:

did it…
Interesting… initial display => startdate=today (29/07/206)
enddate=today+1(30/07/2006)
I pickup from the calendar a new stardate= 09/08/2006,
the startdate textfield display = 09/08/2006… startdateChanged is
executed
the endate textfield display correctly = 18/08/2006 (stardate+10days)

BUT the page source is not modified !

Are you saying that everything now behaves correctly, but when you view
the source the class is still set to the old value? Using the View
Source
option of a browser only shows the HTML state at the time the page was
loaded. You need to use a different method to see a live version.
I’m not sure what’s available for Internet Explorer, but for Firefox
you can either use the DOM Inspector (Ctrl-Shift-I) or the Inspector
of the Firebug plugin: https://addons.mozilla.org/firefox/1843/


We develop, watch us RoR, in numbers too big to ignore.

Mark Reginald J. wrote:
for Firefox

you can either use the DOM Inspector (Ctrl-Shift-I) or the Inspector
of the Firebug plugin: https://addons.mozilla.org/firefox/1843/

That’s why I used to check it… value and class are modified
the value is displayed in the texfield, and if I cleck on the fd-picker
I ‘should’ not be able to pick a new ending date before this calculated
one… but in the fd-picker nothing is modified as it is not
re-created…
(maybe I need to find a way to execute a datepickercontroler.create() )

so RJS and Rails are OK, I need to check the JS code of the fd-picker,
Brian, the developer is on vacation, I’ll check that with him …
thanks again Mark… I got many new info…

I read and tested the ’ RJS Templates for Rails’ PDF document written by
Cody F. (June 2006) so I understand your note about the :update in
the observer with inline RJS…
I also read the the ‘Practical AJAX’ presentation by Erin Mulder (March
2006) so I understand better when to use Ajax or not…
these 2 documents are very very useful…

Kad