This project is archived and is in readonly mode.

rails.js on body.observe('submit',...) but submit doesn't bubble in IE

#4411

In Rails 3, rails.js handles click and submit events to allow links and forms to be submitted remotely while gracefully degrading on browsers with JS disabled. Unfortunately, the submit event doesn't bubble in IE. The following code assumes a function named submit_handler and attaches it to the forms' submit events when the forms receive focus.

if(Prototype.Browser.IE) {
  $(document.body).observe("focusin", function(event) {
    var form = event.findElement("form");
    if(form && !form.submit_bubbles_on_ie) {
      form.submit_bubbles_on_ie = true;
      form.observe("submit", submit_handler);
    }
  });
}

Reported by Bob Lail · April 16th, 2010 @ 03:32 AM

Activity

Bob Lail
Fixed a syntax error in the previous patch.
- rails_js_submit_in_ie_fix.patch 2.74 KB
April 17th, 2010 @ 03:11 PM
Mislav
- Tag changed from rails3 prototype ie submit todo patch event bubble to bubble, event, ie, patch, prototype, rails3, submit, unobtrusive
Hey,

This is an interesting solution, but it's too brittle. What about forms that don't have any inputs? In Rails, there could be forms that do a simple PUT or DELETE with a push of a single button, so they don't have inputs. Or did you find in your testing that form submit buttons get the "focusin" event right before the "submit" event?

April 23rd, 2010 @ 06:03 PM
Bob Lail
Mislav,

I'm pretty sure one of my tests was with a button_to --- and 'focusin' was fired before 'click' and 'submit'. But I'll double-check. I'll post back in a few days.

Bob

April 23rd, 2010 @ 07:20 PM
Mislav
In the meantime I've started a discussion on Prototype-core mailing list; we might get it into v1.7 and then ship it with Rails 3, making workarounds in here unnecessary.

April 23rd, 2010 @ 08:29 PM
Bob Lail
Sorry for the delay --- I finally got some free time to double-check --- the solution does work for a form containing nothing but a button in IE8 and in IE8 running "IE7 mode". I'll have to hunt for a machine that still has IE6 on it.

It does make more sense for this fix to go into Prototype. Will Prototype 1.7 ship around the same time as Rails 3?

April 30th, 2010 @ 02:58 AM
Mislav
We hope so. Here's my plugin for 1.7 that I've proposed for inclusion

April 30th, 2010 @ 04:06 AM
Trent Lloyd
Mislav,

Can you clarify how to test that plugin? I tried to test if it works in my application, using 1.7 and loading that js file after prototype without any luck.. sorry if I don't quite understand how to use it. Just want to confirm if this fix works as I ran into this problem.

Thanks

June 8th, 2010 @ 06:22 PM
josh
- Milestone cleared.
- State changed from new to open
June 8th, 2010 @ 09:03 PM
Mislav
Trent: simply loading that file after Prototype should work, yeah. The caveat is, it only changes the behavior of Element#on, not observe. This will work:
```
document.on('submit', 'form#myform.fancy', function(e) { ... })
```
This will not, because observe still uses the plain native "submit" event which doesn't bubble in IE:
```
document.observe('submit', function(e) { ... })
```
June 9th, 2010 @ 12:55 AM
Jeremy Kemper
- Milestone cleared.
- Importance changed from to High
June 27th, 2010 @ 08:54 PM
Mislav
- Assigned user set to josh
Just to indicate, work on this is being done in the "prototype-ujs" repo and I expect Josh Peek will merge this in core when he's satisfied with the script. It already contains the bubbling fix for IE.

June 27th, 2010 @ 10:17 PM
Repository
- State changed from open to resolved
(from [f61d923d284062b4e4864d81c603157020198d06]) Update to latest rails.js

[#4411 rails.js on body.observe('submit',...) but submit doesn't bubble in IE state:resolved] http://github.com/rails/rails/commit/f61d923d284062b4e4864d81c60315...

June 28th, 2010 @ 12:42 AM
Jeremy Kemper
- Milestone set to 3.0.2
[bulk edit]

October 15th, 2010 @ 11:01 PM