Topic: Handy RJS Tips

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:

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.

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:

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:

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:

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

This feels better to me.


Setting Element Attributes

Let's say you have a text field:

<%= 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.

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

That is so cool!

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

Railscasts - Free Ruby on Rails Screencasts

Re: Handy RJS Tips

This is awesome!

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

Re: Handy RJS Tips

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

Railscasts - Free Ruby on Rails Screencasts

Re: Handy RJS Tips

And also the Prototype element API

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

Re: Handy RJS Tips

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

 page["household_name"]

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

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

is the field I want to populate with that value.

I tried

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

but that didn't work.

Thanks for your help.

Re: Handy RJS Tips

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

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

Re: Handy RJS Tips

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

Re: Handy RJS Tips

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`?

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

Re: Handy RJS Tips

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.

Re: Handy RJS Tips

excellent tips !  Thanks for caring!

Re: Handy RJS Tips

I think there must be a way to get the field values from a form, I know it doesn't make sense if we limit the scope to rjs that most of the time we imply runs in the server.   What if this code is part of a update_page block, that runs in the browser?  Is there a way to extract the value from the DOM object? or is there a way to align a rjs variable with a javascript variable?

Re: Handy RJS Tips

<% form_remote_tag :url => { :action => 'test' }   do %>
  Enter your name: <%= text_field_tag :name %>
  <%= submit_tag "Greet Me" %>
<% end %>
<h2 id="greeting" style="display: none"></h2>
  and make one rjs file and put below code
page[:greeting].show
page[:greeting].update "Greetings, " + params[:name]
page[:greeting].visual_effect :grow
page.select("form").first.reset

using above code you can change the greeting value

Re: Handy RJS Tips

Hello HiteshGoyani,

Thanks for the code. Its really worked.

chateau to rent Loire Valley Chateau rental

Last edited by jhonhud (2013-05-05 03:57:15)

Re: Handy RJS Tips

Thanks for the advise, it saved me loads of time and money. Highly appreciate your help))