Rails - Aug 2009 - 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,
"frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
<frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> 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

On Aug 4, 5:24 pm, "Frank J. Mattia"
<frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > 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
>
> > Thanks for the advice,
> > - FJM

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 Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> On Aug 4, 5:24 pm, "Frank J. Mattia"
<frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>
>
> > > 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
>
>
>
>
>
> > > Thanks for the advice,
> > > - FJM

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: ''<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
>
> On Aug 4, 12:41 pm, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> wrote:
>> On Aug 4, 5:24 pm, "Frank J. Mattia"
<frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>>
>>
>>
>>>> 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
>>
>>
>>
>>
>>
>>>> Thanks for the advice,
>>>> - FJM
> >

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 Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> 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: ''<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
>
>
>
>
>
> > On Aug 4, 12:41 pm, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> > wrote:
> >> On Aug 4, 5:24 pm, "Frank J. Mattia"
<frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >>>> 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
>
> >>>> Thanks for the advice,
> >>>> - FJM

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


On Aug 4, 10:43 pm, "Frank J. Mattia"
<frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> 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 Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> wrote:
>
> > 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: ''<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
>
> > > On Aug 4, 12:41 pm, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> > > wrote:
> > >> On Aug 4, 5:24 pm, "Frank J. Mattia"
<frankjmat...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > >>>> 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
>
> > >>>> Thanks for the advice,
> > >>>> - FJM