AJAX form refreshing page

rubyonrails-talk
1

I am trying to have a page submit a form and have the result update a div instead of reloading the page, but everything I try refreshes the page. I thought the :update part would prevent a page refresh, but perhaps I am leaving something out. Here is an example of something I have tried:

<%= form_remote_tag :url => { :action => :enter },       :update => "position#{box_num}" %> <!-- form fields here --> <%= submit_tag %> </form>

  def enter     #...process fields     render(:layout => false)   end

It looks like I am using Prototype Version: '1.6.0.1' Any ideas?

2

It's proabably not relevant, but the preferred way to do this is now

<% form_remote_tag :url => { :action => :enter }, :update => "position#{box_num}" do %> <!-- form fields here --> <%= submit_tag %> <% end %>

Does your page/layout include prototype?

Fred

3

Oh by the way, if it helps, the form_remote_tag code produces the following:

<form action="/pedigree/enter" method="post" onsubmit="new Ajax.Updater('position8', '/pedigree/enter', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this) + '&amp;authenticity_token=' + encodeURIComponent('021ac9218aede727f7ed79f0185047a005c7c593')}); return false;"><div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="021ac9218aede727f7ed79f0185047a005c7c593" /></div>

I see the "return false" there in the javascript, which should at least prevent it from submitting the form in the ordinary manner.

4

It's proabably not relevant, but the preferred way to do this is now

<% form_remote_tag :url => { :action => :enter }, :update => "position#{box_num}" do %> <!-- form fields here --> <%= submit_tag %> <% end %>

I tried something close to that at one point. The example I saw had dashes before the closing %>'s and I think it had <%='s for the opening tags. I have updated my code to the preferred way you describe, but it is still doing the same thing.

Does your page/layout include prototype?

This shows up in the page. <script src="/javascripts/prototype.js?1207561014" type="text/ javascript"></script> And the file is there, so it should be getting it.

5

Oh by the way, if it helps, the form_remote_tag code produces the following:

<form action="/pedigree/enter" method="post" onsubmit="new Ajax.Updater('position8', '/pedigree/enter', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this) + '&amp;authenticity_token=' + encodeURIComponent('021ac9218aede727f7ed79f0185047a005c7c593')}); return false;"><div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="021ac9218aede727f7ed79f0185047a005c7c593" /></div>

I see the "return false" there in the javascript, which should at least prevent it from submitting the form in the ordinary manner.

It probably means that the code before the return false is raising an
exception. Installing firebug or similar should help you out. This
would happen for example if there was no div with id position8

Fred

6

I have heard about firebug, but have never used it. It looks like it would be useful, thanks. Here is what it said:

element.dispatchEvent is not a function http://127.0.0.1:3000/javascripts/prototype.js?1207561014 Line 3972 fire([Document pedigree], "dom:loaded", undefined)prototype.js (line 3972) _methodized()prototype.js (line 246) fireContentLoadedEvent()prototype.js (line 4006) [Break on this error] element.dispatchEvent(event);

I will try to step through it unless some has any ideas

7

I have heard about firebug, but have never used it. It looks like it would be useful, thanks. Here is what it said:

related to http://www.ruby-forum.com/topic/137465 ?

Fred

8

I have heard about firebug, but have never used it. It looks like it would be useful, thanks. Here is what it said:

element.dispatchEvent is not a function http://127.0.0.1:3000/javascripts/prototype.js?1207561014 Line 3972 fire([Document pedigree], "dom:loaded", undefined)prototype.js (line 3972) _methodized()prototype.js (line 246) fireContentLoadedEvent()prototype.js (line 4006) [Break on this error] element.dispatchEvent(event);

I will try to step through it unless some has any ideas

9

I remember reading about jquery and prototype conflicting, but I thought, it's working for me right now....

Thanks for the quick and efficient help.