How to fire Ajax call from Form_for

I am learning Rails 3 and need some help on Ajax part.

I am trying to accomplish the following: There is a textarea on the page which has a length of letters constraint, say 100. Every time a symbol is typed there,a nearby label tells you how many letters you have left.

I plan to use Ajax to do this.

I googled for a few hours and could not figure out how to do this.

So far what I have done is the follows:

Step 1. Add :remote => true to the form_for method. This form_for method lives in a partial which is called in app/views/foos/home.html.erb

Step 2. Add respond_to do |format| format.html format.js end

to FoosController's corresponding Home action.

Step 3.create home.js.erb under app/views/foos/

But I do not know how to add something so when a letter is typed in a textarea inside the form generated by form_for method that home.js.erb will process.

Could someone help me out here?

If you do that then every time a letter is typed it will have to send a request to the server, which is a bad idea. Use javascript instead.

Colin

Javascript should be a better idea here. I am new to Rails and do not know how to write javascript inside rails 3. More specifically, two questions:

1. which event should I respond to? keypress, keydown,keyup? 2. Rails 3 uses Unobtrusive Javascript. All I can think of now is old obtrusive one. How can I use unobtrusive one to do this.

Any help with pointing to the right direction would be greatly appreciated.

Colin Law wrote in post #1037179:

I think there are jquery / prototype - plugins available; did you check?

Stephan

Jay Chaun wrote in post #1037174:

I am learning Rails 3 and need some help on Ajax part.

I am trying to accomplish the following: There is a textarea on the page which has a length of letters constraint, say 100. Every time a symbol is typed there,a nearby label tells you how many letters you have left.

I plan to use Ajax to do this.

I googled for a few hours and could not figure out how to do this.

So far what I have done is the follows:

Step 1. Add :remote => true to the form_for method. This form_for method lives in a partial which is called in app/views/foos/home.html.erb

Step 2. Add respond_to do |format| format.html format.js end

to FoosController's corresponding Home action.

Step 3.create home.js.erb under app/views/foos/

But I do not know how to add something so when a letter is typed in a textarea inside the form generated by form_for method that home.js.erb will process.

Could someone help me out here?

hi Jay here is a link to a type of your example i noticed at a website that allows users to post classified ads with a word length of 25 characters and adjusts the character count as you type your advert text description. the site is a free classified ads paper http://www.startrader.com.au/

Jay Chaun wrote in post #1037174:

/views/foos/

But I do not know how to add something so when a letter is typed in a textarea inside the form generated by form_for method that home.js.erb will process.

Could someone help me out here?

Check out JQuery for this. I don't have any specific examples, but you need to have javascript react to onclick. I think if you use the form_for submit tag, you'll need to submit the form to get the results you want.

However, I believe you only want to query for characters during typing and do something different when you submit the form.

try this link, is this what you are looking for?

http://cssglobe.com/lab/charcount/01.html

You will find complete implementation details and link to download here

http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas

Gautam Pai

Thanks to Colin Law, Timothy G., Stephan Wehner, Greg Akins, Gautam Pai. Here is what I got.

1. Ajax is a bad idea for this. It will waste bandwidth and more importantly makes the character counting unreliable. You do not know when the response will be.

2. Javascript is supposed to be the tool to handle this type of tasks. Both jquery and prototype does the work. I did not know which event to respond to and how to attach event handlers to the element. Now I know.

a) Default place for the javascript code. "application.js". No other changes is needed. However, if you would like to load code like this dynamically into your application.js, you are welcome to do so.

b). For jquery, the code could be the following: