submitting an ajax form via javascript not rendering

rubyonrails-talk
1

for some reason the controller is parsing everything fine, but the return is a page instead of code execution. I have other ajax forms no listed that are also running fine on this same page.

there are supposed to be 3 ajax events: onblur event that calls a function to submit - doesn't work. There is a submit button at the end of the form - works there is a delete image that removed the row when clicked - works

I have also tried the onblur event just as this.form.submit(); Either case, I get the following which looks OK, just not running. try { update_row(16, "12345678", 24, 14, 100, 75); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('update_row(16, \"12345678\", 24, 14, 100, 75);'); throw e }

In my controller I've tried using page.call and just tried a page.insert as well, but no dice.

The controller code is pretty standard .... render :update do |page|   page.call "update_row", id,v1,v2,v3,v4,v5 end

Here is a chunk of the rendered html, sorry, its not very pretty.

<SCRIPT type="text/javascript">   function submit_form(obj, form_id)   {     document.getElementById(form_id).submit();   } </script> .....

<form action="/assignment/update_assignment/16" id="frm_16" method="post" onsubmit="new Ajax.Request('/assignment/update_assignment/16', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this) + '&amp;authenticity_token=' + encodeURIComponent('***')}); return false;">

<div style="margin:0;padding:0">   <input name="authenticity_token" type="hidden" value="***" /> </div>    <input class='reg_c' value='12345678' onblur="submit_form(this,'frm_16')">    <input type='submit'> </form>

<form action="/assignment/delete_assignment/16" method="post" onsubmit="new Ajax.Request('/assignment/delete_assignment/16', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this) + '&amp;authenticity_token=' + encodeURIComponent('***')}); return false;">

<div style="margin:0;padding:0">     <input name="authenticity_token" type="hidden" value="***" /> </div>

  <input type='image' src='/images/delRow.gif' alt='delete row'> </form>

2

When you do this,

  <input class='reg_c' value='12345678' onblur="submit_form(this,'frm_16')">

I think the "this" is the input element.

Try adding an alert:

  onblur="alert(this); submit_form(this, 'f...')"

Could be that "this.form" works out (HTML Forms)

Are you sure that a page-update triggered by "onblur" is user-friendly?

Stephan

3

With AJAX, it's important to trace it through very carefully, slowly,
step by step, verifying each step of the way, tailing your logs and
ensuring you have all the results you'd expect.

Start with your form. It looks okay. It's calling... delete? Can we
see the helper code that generates the form tag, please?

now, the delete action, give it a render update and make it simply do
page.alert("hi") when you've verified that works, go on the to the
next step.

Julian.

Learn Ruby on Rails! Check out the FREE VIDS (for a limited time)
VIDEO #3 out NOW! http://sensei.zenunit.com/

4

Julian Leviston wrote:

With AJAX, it's important to trace it through very carefully, slowly, step by step, verifying each step of the way, tailing your logs and ensuring you have all the results you'd expect.

I'll dig into these right now and see if anything looks odd.

Start with your form. It looks okay. It's calling... delete? Can we see the helper code that generates the form tag, please?

The update that is failing, delete works OK. I've attached the code for the controller, index and partial that I am using. In the index file there is a form to assign a new piece of equipment, then in the partial there are 2 forms, 1 for the delete another for the update as I mentioned eariler.

Hopefully the text file comes through, if not I'll trim down the file and post the relevant code in here.

now, the delete action, give it a render update and make it simply do page.alert("hi") when you've verified that works, go on the to the next step.

I've taken all the code out of update excepts for

    render :update do |page|       page.alert("hi")     end

and it still just prints out the text instead of rendering. Perhaps the logs will clue me in. if I find anything I'll post back.

Attachments: http://www.ruby-forum.com/attachment/1715/code.txt

5

Bob Br wrote:

Julian Leviston wrote:

With AJAX, it's important to trace it through very carefully, slowly, step by step, verifying each step of the way, tailing your logs and ensuring you have all the results you'd expect.

I'll dig into these right now and see if anything looks odd.

I'm pretty sure your problem is with using "this" in

  <input class='reg_c' value='12345678' onblur="submit_form(this,'frm_16')">

See earlier post.

Stephan

6

Bob Br wrote:

in the javascript form, I don't try a this.form.submit, instead I send 'frm_16' as the form_id and have

document.getElementById(form_id).submit();

Try calling onsubmit(), instead of submit()

Stephan

7

Bob Br wrote:

Stephan Wehner wrote:

Bob Br wrote:

in the javascript form, I don't try a this.form.submit, instead I send 'frm_16' as the form_id and have

document.getElementById(form_id).submit();

Try calling onsubmit(), instead of submit()

Stephan

Same deal. I've changed the controller code to just be the alert. When I push the submit button at the end of the row, the alert comes through just fine.

This is rather vexing, and I appreciate your help and ideas!

Ok, more basically ....

Do alert's work instead of form.onsubmit() ?

<input onblur="alert('good')" value="blur alert">

Are you using Internet Explorer?

Stephan

8

Stephan Wehner wrote:

Bob Br wrote:

Stephan Wehner wrote:

Bob Br wrote:

in the javascript form, I don't try a this.form.submit, instead I send 'frm_16' as the form_id and have

document.getElementById(form_id).submit();

Try calling onsubmit(), instead of submit()

Stephan

Same deal. I've changed the controller code to just be the alert. When I push the submit button at the end of the row, the alert comes through just fine.

This is rather vexing, and I appreciate your help and ideas!

Ok, more basically ....

Do alert's work instead of form.onsubmit() ?

<input onblur="alert('good')" value="blur alert">

Are you using Internet Explorer?

Stephan

Yeah, the blur alerts happen. Can you see if you can recreate this? If you are running v2 of rails that is.

Here is a simplified version of the code that still fails for my install. Clicking the submit button returns "Sup?" and leaving the cell has a "test" popup, but the render never comes in.

Controller -

  def update     render :update do |page|       page.alert "sup? "     end   end

  def test   end

Index

<%= form_remote_tag( :html=>{:id => "frm_1"}, :url => {:controller => :assignment, :action => :update}) %>   <input value='' onblur="alert('test'); this.form.submit();">   <input type='submit'> </form>

9

Here is a simplified version of the code that still fails for my install. Clicking the submit button returns "Sup?" and leaving the cell has a "test" popup, but the render never comes in.

: :

<%= form_remote_tag( :html=>{:id => "frm_1"}, :url => {:controller => :assignment, :action => :update}) %>   <input value='' onblur="alert('test'); this.form.submit();">   <input type='submit'> </form>

Sorry, to be so slow, but can you check whether the render happens when replacing this.form.submit() by this.form.onsubmit() ?

(Also you might do well to run this under Firefox and install firebug, which has a nice javascript debugger. I assume you don't have that.)

Stephan

10

Stephan Wehner wrote:

Sorry, to be so slow, but can you check whether the render happens when replacing this.form.submit() by this.form.onsubmit() ?

(Also you might do well to run this under Firefox and install firebug, which has a nice javascript debugger. I assume you don't have that.)

Stephan

That didn't work either.

I'm doing most of my testing with FF and firebug, but occasionally switch over to IE just to make sure it is broken there as well. When I run it in IE, it actually tries to save the code as a file instead of showing the page like FF does.

In terms of firebug, when I click the submit button it creates a normal ajax request, but the onblur doesn't show anything of the sort.

11

Bob Br wrote:

Stephan Wehner wrote:

Sorry, to be so slow, but can you check whether the render happens when replacing this.form.submit() by this.form.onsubmit() ?

(Also you might do well to run this under Firefox and install firebug, which has a nice javascript debugger. I assume you don't have that.)

Stephan

ok... I don't know why, but when I added return false; onblur="this.form.onsubmit(); return false;"

it started working. Then to test I removed the return false and it continued to work. But it did fail when I changed it back to just a .submit(); so your tip was invaluable!

Unless its just messing with me, it seems to be fixed, thanks for your help!

12

Bob Br wrote:

Bob Br wrote:

Stephan Wehner wrote:

Sorry, to be so slow, but can you check whether the render happens when replacing this.form.submit() by this.form.onsubmit() ?

(Also you might do well to run this under Firefox and install firebug, which has a nice javascript debugger. I assume you don't have that.)

Stephan

ok... I don't know why, but when I added return false; onblur="this.form.onsubmit(); return false;"

it started working. Then to test I removed the return false and it continued to work.

sounds familiar :slight_smile:

But it did fail when I changed it back to just a .submit(); so your tip was invaluable! Unless its just messing with me, it seems to be fixed, thanks for your help!

Glad this hurdle is passed!

Stephan