Refactoring RJS

rubyonrails-talk
1

I have some RJS that could use some refactoring. I use the function called with afterFinish twice and Im wondering what the best way to refactor is. This is all inline rjs in the controller mind you:

         page.visual_effect :slide_down, "add_appt_#{params [:day]}", :afterFinish => "function(){       $('end_drop_#{params[:day]}_#{params [:appt_counter]}').style.display = 'block';       $('end_drop_#{params[:day]}_#{params [:appt_counter]}').style.visibility = 'hidden';       $('start_drop_#{params[:day]}_#{params [:appt_counter]}').style.display = 'block';       $('start_drop_#{params[:day]}_#{params [:appt_counter]}').style.visibility = 'hidden';          }"

Yummy :-). if you're using prototype you can replace

$('end_drop_foo').style.display = 'block'; $('end_drop_foo').style.visibility = 'hidden';

with

$('end_drop_foo').setStyle({display: 'block', visibility: 'hidden'})

If i were you I'd have in my application.js a function like

function resetVisibility(element){    element.setStyle({display: 'block', visibility: 'hidden'}) }

then then your rjs stuff looks like

resetVisibility('end_drop_#{params[:day]}_#{params[:appt_counter]}') resetVisibility('start_drop_#{params[:day]}_#{params[:appt_counter]}')

or even right the whole thing as a js function (RJS can be a bit of a
crutch)

Fred

2

Hi Fred, thanks so much for your response, that is exactly what I was looking for. What do you mean by rjs can be a bit of a crutch? What do you mean by rewriting the whole thing as a js function. You mean just something like resetVisibility() and then just reset both the end_drop and start_drop elements within the resetVisibility function?

Thanks for your help, Dave

3

Hi Fred, thanks so much for your response, that is exactly what I was looking for. What do you mean by rjs can be a bit of a crutch?

I mean that you can torture yourself for a long time trying to
convince rjs to do something whereas you could get it done quicker
(and probably end up with nicer results) just be writing the JS. Sure
you'll need to spend a bit of time getting familiar with javascript
and prototype/jquery/whatever library you end up using but it will be
worth it in the long run

What do you mean by rewriting the whole thing as a js function. You mean just something like resetVisibility() and then just reset both the end_drop and start_drop elements within the resetVisibility function?

replace the whole rjs block by a call to a function that looked
something like

function do_it(element_to_slide, end_drop_element, start_drop_element){    new Effect.SlideDown(element_to_slide, {   afterFinish: function(){     resetVisibility(end_drop_element);     resetVisibility(start_drop_element);   }); }