Problem with auto-submitting AJAX form


#1

Hello,

I have a form generated with form_remote_tag that contains a selection
list. I would like to auto-submit the form when the user makes a choice
in the selection list, so I added an option :onchange =>
‘this.form.submit()’ to select_tag

Now what happens is that when I make a choice, the partial template
get’s rendered as expected, but not replacing the target div but the
entire window instead! The div replacement works just fine when I submit
the form using the submit button.

Why is that?

Ingo W.


#2

Ingo W. wrote:

Hello,

I have a form generated with form_remote_tag that contains a selection
list. I would like to auto-submit the form when the user makes a choice
in the selection list, so I added an option :onchange =>
‘this.form.submit()’ to select_tag

Now what happens is that when I make a choice, the partial template
get’s rendered as expected, but not replacing the target div but the
entire window instead! The div replacement works just fine when I submit
the form using the submit button.

Why is that?

Ingo W.

I’ve run into this before, the sad part is that I can’t remember how I
solved it.

Your form is not being submitted via AJAX. All the magic of
form_remote_tag happens in the onsubmit property of the form tag. The
trouble is when the form is submit via javascript “form.submit()” the
onsubmit is event is bypassed, yet it will work as expected via submit
button. So when its submitted via javascript is just a standard form
submission, with no AJAX.

Perhaps you can call “$(‘submit-button’).click” or even
“this.form.onsubmit()” to directly call the events that make the magic
happen.

I think that’s how I solved it anyway.


#3

“this.form.onsubmit()”

This did the trick - thanks so much, Alex!

Ingo W.