Handy RJS Tips

ryanb · 2006-10-31 04:54:36

Here's a few RJS tips that don't seem to be documented very well. If you have a tip to share, please add it to this thread.

Outputting Javascript Directly

RJS is very convenient, but sometimes you want to do something which is not directly supported through RJS. You can output any kind of JavaScript you want like this:

Code : ruby - fold - unfold

page << "document.forms[0].reset();"

This will call reset on the first form in the document, just as if you typed the javascript directly inline!

Selecting Multiple Tags

Prototype offers the ability to select HTML elements through a powerful CSS like syntax. Ruby makes this even more powerful by allowing you to use Ruby blocks to iterate through the selected HTML elements. For example.

Code : ruby - fold - unfold

page.select('form').each { |f| f.reset }

This will reset all of the forms on the page. As mentioned the selectors are similar to CSS, so you can do this:

Code : ruby - fold - unfold

page.select('.book').each { |b| b.hide }

This will hide all of the elements with the class 'book'. Very handy!

Specifying Element

Most RJS helper methods take the name of the element as the first parameter. For example:

Code : ruby - fold - unfold

page.replace_html :greeting, 'Hello World!'

This will find an HTML element with the id 'greeting' and replace its content with "Hello World!". Instead of specifying the DOM id as the first element, you can place it in square brackets like this:

Code : ruby - fold - unfold

page[:greeting].replace_html 'Hello World!'

This feels better to me.

Setting Element Attributes

Let's say you have a text field:

Code : ruby - fold - unfold

<%= text_field_tag :search %>

And you want to set the value of this text field through RJS dynamically. No problem, just grab the element as shown previously, then set the 'value' attribute just like you would a normal Ruby object.

Code : ruby - fold - unfold

page[:foo].value = 'Search Here!'

That is so cool!

Last edited by ryanb (2006-10-31 18:06:42)

liquid · 2007-07-15 15:24:43

This is awesome!

Are there any resources on the web where most of the RJS functions and methods can be found? (like a reference)

ryanb · 2007-07-16 20:20:56

There's the API which is a pretty good reference.

boemitsu · 2007-07-17 06:48:51

And also the Prototype element API

http://www.prototypejs.org/api/element

ricsrock · 2007-10-28 22:55:49

How can I grab the value of a field and set that value as the pre-populated value in a form added with rjs?

In my case

Code : - fold - unfold

page["household_name"]

has the value I want to grab, and...

Code : - fold - unfold

page["people[#{params[:index]}]_last_name"]

is the field I want to populate with that value.

I tried

Code : - fold - unfold

page["people[#{params[:index]}]_last_name"].value = page["household_name"]

but that didn't work.

Thanks for your help.

Duplex · 2007-10-28 22:59:54

Suff like that is not possible with RJS. Add some custom Javascript to the page object.

Code : ruby - fold - unfold

page << "$('people#{params[:index]}_last_name.')value = $('houshold_name').value"

yukti · 2008-07-24 08:27:04

Hie I am trying to set a hidden field , when a person clicks on check all
I am unable to add the javascript (RJS) script here .

<input type="checkbox" name="emp[]" value="All" onClick="page << $('hddChkAll').value=1)">

<input name="hddChkAll" id="hddChkAll" value=0>

This is not working sad

Please help

Duplex · 2008-07-24 08:31:00

you only use RJS in RJS templates, not in views (well, except using a update_page block, but that's an exception)

you already have pure javascript typed out, why do you wanna use RJS to print pure javascript into the view when you can simply print it directly`?

Code : ruby - fold - unfold

<input type="checkbox" name="emp[]" value="All" onClick="$('hddChkAll').value=1)">

yukti · 2008-07-24 08:40:35

Thanks for an immediate response smile

1) I am a PHP developer and dont know things about RJS

2) In this scenarioo, I want javascript kind effect,ie a client side change. As far I know RJS is for Server side effects more like ajax, Is it true ? Please tell me little about this.

3) I want on check all checkboxes and delete all with destroy_all feature so I looped in my controller as

def manage_list_actions
@arrEmployees=params[:emp]
@arrEmployees.each{ |empl|

   if empl=='All'
   Employee.destroy_all
   redirect_to :action => :index
   params[:emp]= Array.new
   else
@employee = Employee.find(empl)
@employee.destroy
redirect_to :action => :index
   end

}

end

but this deletes all records and still loop and check for the ids (which got deleted with destroy_all) thus resulting an ERROR.

Please help.

#1 2006-10-31 04:54:36

#2 2007-07-15 15:24:43

Re: Handy RJS Tips

#3 2007-07-16 20:20:56

Re: Handy RJS Tips

#4 2007-07-17 06:48:51

Re: Handy RJS Tips

#5 2007-10-28 22:55:49

Re: Handy RJS Tips

#6 2007-10-28 22:59:54

Re: Handy RJS Tips

#7 2008-07-24 08:27:04

Re: Handy RJS Tips

#8 2008-07-24 08:31:00

Re: Handy RJS Tips

#9 2008-07-24 08:40:35

Re: Handy RJS Tips

Board footer