forms, javascript and ajax - hopefully an easy question

rubyonrails-talk
1

Right now I have a simple form hooked up. Now that the form is smooth and functional, I want to add a feature that I'm not sure how to implement.

After a user modifies a form, I'd like to have a visual cue appear somewhere to show that the form has been changed and needs to be saved.

It could be a red div at the top of the screen - anything - it is doesn't matter. Just making it show up when "changed" and disappear when "saved" is what I want to do.

Thanks for the advice, - FJM

2

I should probably note that the form is hooked up with "remote_form_for" so that saving it doesn't cause the page to reload.

3

> Right now I have a simple form hooked up. Now that the form is smooth > and functional, I want to add a feature that I'm not sure how to > implement.

> After a user modifies a form, I'd like to have a visual cue appear > somewhere to show that the form has been changed and needs to be > saved.

> It could be a red div at the top of the screen - anything - it is > doesn't matter. > Just making it show up when "changed" and disappear when "saved" is > what I want to do.

You're going to have to do this client side, either use the observe_form helper or write the equivalent javascript yourself (if you are using prototype look at Form.Observer and friends)

Fred

4

I figured that would be my starting point however, with a very limited knowledge of prototype and javascript in general - its not easy to hit the ground running with only the docs. Any other advice you can give me?

5

I figured that would be my starting point however, with a very limited knowledge of prototype and javascript in general - its not easy to hit the ground running with only the docs. Any other advice you can give me?

Prototype (and obviously other js frameworks) have methods for
inserting html into other elements, in prototype you might for example
do

$('header').insert({top: '<p>Hello world</p>'}) which will insert that text at the top of the element with id
'header'. You'd use that as the code you want evaluated when
Form.Observer (or observe_form etc.) decides that the form has changed.

Fred

6

ok so that takes care of when the form changes, how about submit? how do i know if the submit was sucessful?

7

something like this?

in your controller,

respond_to do |format|     format.js { message = @task.update_attributes(params[:task]) ? "Updated successfully" : "Update failed"                     render :update do |page|                          page.replace_html :flash_area, message                         #use RJS to find and hide the red div band                     end                    } end