Rails spinoffs - Jan 2008 - Ajax form post without submitting the entire page

Hi guys,

I want to submit a form via Ajax but have the form degrade to a
standard (full page) submission when users don''t have javascript.
I''d
like my markup to be clean, so I''d rather not have any
onsubmit="" in
my <form> tag.

Currently I have an Event.observe(''myForm'',
''submit'', handler), but in
my function (handler) I can''t stop the form from doing a full page
submission.

I''ve tried Event.stop(event); but that doesn''t work.

I''m using Prototype 1.6

Any ideas?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Found a solution!

In the DOM ready code, use the following instead of an Event.observe()

$(''frm'').onsubmit = handler;

The function (handler) still has access to the event which is nice.

BUT...

There is another problem, I''m using Ajax.Request as I want to do
specific things with the data returned and when I submit the form to
the server (using Ajax only) the first time it works great. But if I
then submit the form again (with no full page refresh in between) it
doesn''t work.

It''s almost like the DOM ready code can''t see the form
anymore. Is
there a way to re-initialise the Prototype code when you come back
from an Ajax call or something?



On Jan 23, 4:10 pm, Michael Sharman
<sha...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hi guys,
>
> I want to submit a form via Ajax but have the form degrade to a
> standard (full page) submission when users don''t have javascript.
I''d
> like my markup to be clean, so I''d rather not have any
onsubmit="" in
> my <form> tag.
>
> Currently I have an Event.observe(''myForm'',
''submit'', handler), but in
> my function (handler) I can''t stop the form from doing a full page
> submission.
>
> I''ve tried Event.stop(event); but that doesn''t work.
>
> I''m using Prototype 1.6
>
> Any ideas?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

To continue my bad habit of finding things out after I post here!
>I''ve tried Event.stop(event); but that doesn''t work.
Actually this does work, I didn''t realise you had to have it first in
your ''handler'' function.

But my second problem still remains...

On Jan 23, 4:28 pm, Michael Sharman
<sha...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Found a solution!
>
> In the DOM ready code, use the following instead of an Event.observe()
>
> $(''frm'').onsubmit = handler;
>
> The function (handler) still has access to the event which is nice.
>
> BUT...
>
> There is another problem, I''m using Ajax.Request as I want to do
> specific things with the data returned and when I submit the form to
> the server (using Ajax only) the first time it works great. But if I
> then submit the form again (with no full page refresh in between) it
> doesn''t work.
>
> It''s almost like the DOM ready code can''t see the form
anymore. Is
> there a way to re-initialise the Prototype code when you come back
> from an Ajax call or something?
>
> On Jan 23, 4:10 pm, Michael Sharman
<sha...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Hi guys,
>
> > I want to submit a form via Ajax but have the form degrade to a
> > standard (full page) submission when users don''t have
javascript. I''d
> > like my markup to be clean, so I''d rather not have any
onsubmit="" in
> > my <form> tag.
>
> > Currently I have an Event.observe(''myForm'',
''submit'', handler), but in
> > my function (handler) I can''t stop the form from doing a full
page
> > submission.
>
> > I''ve tried Event.stop(event); but that doesn''t work.
>
> > I''m using Prototype 1.6
>
> > Any ideas?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Let''s start with some basic code that you can try out and then
follow-up with questions you may have.

First, some JavaScript:

function prepare(){
  var form = $(''my-form'');
  form.observe(''submit'', handle);
}

function handle(event){
  event.stop();
  var form = $(''my-form'');
  new Ajax.Request(''/my-page'', {
parameters:Form.serialize(form),
onComplete: callback } );
}

function callback(response){
  alert(response.transport.responseText);
}

//----------------

And the HTML

<form id="my-form" action="/my-page">
  <input type="submit" value="Submit this silly form!"
/>
</form>
<script type="text/javascript">
  Event.observe(document, ''dom:loaded'', prepare);
</script>


I haven''t tested any of this code, but I think it should work. I
recommend getting yourself with the documentation on the Prototype
API: http://prototypejs.org/api

Have a great night.

-justin

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On 23.1.2008, at 7.10, Michael Sharman wrote:
>
> Hi guys,
>
> I want to submit a form via Ajax but have the form degrade to a
> standard (full page) submission when users don''t have javascript.
I''d
> like my markup to be clean, so I''d rather not have any
onsubmit="" in
> my <form> tag.
>
> Currently I have an Event.observe(''myForm'',
''submit'', handler), but in
> my function (handler) I can''t stop the form from doing a full page
> submission.
>
> I''ve tried Event.stop(event); but that doesn''t work.
>
> I''m using Prototype 1.6
>
> Any ideas?
Try out Low Pro:
http://jlaine.net/2007/8/6/from-rails-ajax-helpers-to-low-pro-part-2

Event.addBehavior({
   ''#my_form'' : Remote.Form
});

Cheers,
//jarkko

--
Jarkko Laine
http://jlaine.net
http://dotherightthing.com
http://www.railsecommerce.com
http://odesign.fi



--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hi Justin,

Thanks for your reply, after my posts above I found a solution to my
second problem where the Ajax function doesn''t fire the 2nd
consequtive time you call it.

Just as you had in your post, I needed to have another
''Observe'' in
the returned HTML from the handler function.
>Event.observe(document, ''dom:loaded'', prepare);
Although this works find, I would have liked to find a way where my
markup is clean of any javascript and the default Observer worked from
the linked .js file (as it does on the first ajax request).

Thanks again

On Jan 23, 5:00 pm, "Justin Perkins"
<justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Let''s start with some basic code that you can try out and then
> follow-up with questions you may have.
>
> First, some JavaScript:
>
> function prepare(){
>   var form = $(''my-form'');
>   form.observe(''submit'', handle);
>
> }
>
> function handle(event){
>   event.stop();
>   var form = $(''my-form'');
>   new Ajax.Request(''/my-page'', {
parameters:Form.serialize(form),
> onComplete: callback } );
>
> }
>
> function callback(response){
>   alert(response.transport.responseText);
>
> }
>
> //----------------
>
> And the HTML
>
> <form id="my-form" action="/my-page">
>   <input type="submit" value="Submit this silly
form!" />
> </form>
> <script type="text/javascript">
>   Event.observe(document, ''dom:loaded'', prepare);
> </script>
>
> I haven''t tested any of this code, but I think it should work. I
> recommend getting yourself with the documentation on the Prototype
> API:http://prototypejs.org/api
>
> Have a great night.
>
> -justin
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Jan 23, 2008 4:06 AM, Michael Sharman
<sharmo-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Although this works find, I would have liked to find a way where my
> markup is clean of any javascript and the default Observer worked from
> the linked .js file (as it does on the first ajax request).
The dom:loaded observer will work fine in a linked JS file. That is
typically where you would put them, or the head of your HTML document.

-justin

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

It does work in an external file, but once per page load only.

So if I fire an ajax form submission (and the same form is returned in
that ajax response), then attempt to fire it again (without reload the
entire page) it seems to fail.

It only works in that scenario when I have the dom:loaded observer
under the form code (which is also returned in the ajax response)

On Jan 24, 1:49 am, "Justin Perkins"
<justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> On Jan 23, 2008 4:06 AM, Michael Sharman
<sha...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Although this works find, I would have liked to find a way where my
> > markup is clean of any javascript and the default Observer worked from
> > the linked .js file (as it does on the first ajax request).
>
> The dom:loaded observer will work fine in a linked JS file. That is
> typically where you would put them, or the head of your HTML document.
>
> -justin
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Jan 23, 2008 4:00 PM, Michael Sharman
<sharmo-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> So if I fire an ajax form submission (and the same form is returned in
> that ajax response), then attempt to fire it again (without reload the
> entire page) it seems to fail.
>
> It only works in that scenario when I have the dom:loaded observer
> under the form code (which is also returned in the ajax response)
Well yes. When you do that you are ripping DOM elements out of the
page. At this point your DOM listeners are still attached to these
orphaned elements, waiting in vain for an event to occur.

You need to run through your event registration code on any new
elements. Embedding a dom:loaded listener in an Ajax response is not
something I would ever do, I just tack on a call to my event
registration method either at the end of the response or in the
onSuccess handler for the Ajax request.

-justin

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I guess I thought it would work because the returned HTML is identical
to what was ''posted'' (with the addition of an extra list item)
including the form and surrounding div''s

This is all I am returning (after the HTML) from the Ajax response:

<script type="text/javascript">
	Event.observe(''frmAddLink'', ''submit'',
submitForm);
</script>



On Jan 24, 9:13 am, "Justin Perkins"
<justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> On Jan 23, 2008 4:00 PM, Michael Sharman
<sha...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > So if I fire an ajax form submission (and the same form is returned in
> > that ajax response), then attempt to fire it again (without reload the
> > entire page) it seems to fail.
>
> > It only works in that scenario when I have the dom:loaded observer
> > under the form code (which is also returned in the ajax response)
>
> Well yes. When you do that you are ripping DOM elements out of the
> page. At this point your DOM listeners are still attached to these
> orphaned elements, waiting in vain for an event to occur.
>
> You need to run through your event registration code on any new
> elements. Embedding a dom:loaded listener in an Ajax response is not
> something I would ever do, I just tack on a call to my event
> registration method either at the end of the response or in the
> onSuccess handler for the Ajax request.
>
> -justin
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---