Forms, javascript and ajax - hopefully an easy question

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

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.

On Aug 4, 12:23 pm, “[email protected][email protected]

On Aug 4, 5:24 pm, “Frank J. Mattia” [email protected] wrote:

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

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?

On Aug 4, 12:41 pm, Frederick C. [email protected]

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

On Aug 4, 1:09 pm, Frederick C. [email protected]

On 4 Aug 2009, at 17:53, Frank J. Mattia wrote:

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: ‘

Hello world

’})
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

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