This project is archived and is in readonly mode.

#4411 ✓resolved
Bob Lail

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

Reported by Bob Lail | April 16th, 2010 @ 03:32 AM | in 3.0.2

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);
    }
  });
}

Comments and changes to this ticket

  • Bob Lail

    Bob Lail April 17th, 2010 @ 03:11 PM

    Fixed a syntax error in the previous patch.

  • Mislav

    Mislav April 23rd, 2010 @ 06:03 PM

    • 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?

  • Bob Lail

    Bob Lail April 23rd, 2010 @ 07:20 PM

    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

  • Mislav

    Mislav April 23rd, 2010 @ 08:29 PM

    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.

  • Bob Lail

    Bob Lail April 30th, 2010 @ 02:58 AM

    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?

  • Mislav

    Mislav April 30th, 2010 @ 04:06 AM

    We hope so. Here's my plugin for 1.7 that I've proposed for inclusion

  • Trent Lloyd

    Trent Lloyd June 8th, 2010 @ 06:22 PM

    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

  • josh

    josh June 8th, 2010 @ 09:03 PM

    • Milestone cleared.
    • State changed from “new” to “open”
  • Mislav

    Mislav June 9th, 2010 @ 12:55 AM

    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) { ... })
    
  • Jeremy Kemper

    Jeremy Kemper June 27th, 2010 @ 08:54 PM

    • Milestone cleared.
    • Importance changed from “” to “High”
  • Mislav

    Mislav June 27th, 2010 @ 10:17 PM

    • 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.

  • Repository

    Repository June 28th, 2010 @ 12:42 AM

    • State changed from “open” to “resolved”
  • Jeremy Kemper

    Jeremy Kemper October 15th, 2010 @ 11:01 PM

    • Milestone set to 3.0.2

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

<h2 style="font-size: 14px">Tickets have moved to Github</h2>

The new ticket tracker is available at <a href="https://github.com/rails/rails/issues">https://github.com/rails/rails/issues</a>

Attachments

Referenced by

Pages