IE7/8 Form Submit Bug #2001

Closed
jeff-ph opened this Issue Jun 30, 2011 · 16 comments

Projects

None yet

7 participants

@jeff-ph

I found a bug in the beta release of jQuery Mobile when trying to use jQuery to handle form submissions in IE7/8. Trying to submit such a form (without an action attribute specified) results in a jQuery Mobile "Error Loading Page" message. By tweaking the js, I exposed the error behind this to be "Not Found". This error does not occur when using the last alpha release. Specifying the action attribute avoids the error, but the jQuery submit function does not get triggered.

I'm not sure how to set any priority or type for this issue (maybe because I'm a new user here and don't have privileges?).

Below is code I used to test. If you switch to use the alpha js instead of the beta js, the error does not occur and the alert is triggered as expected.

<!DOCTYPE html>
<head>

<!--- jQuery mobile beta CSS.--->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<!--- jQuery --->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<!--- jQuery mobile beta JS. --->
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>

<!--- jQuery mobile alpha JS. --->
<!---<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>--->

<script type="text/javascript">
    $(document).ready(function() {

        $("#test").submit(function() {
            alert($("#submitMsg").val());

            return false;
        });

    });
</script>

</head>
<body>

<div data-role="page">

    <div data-role="content">

        <form id="test" method="post">
            <input type="hidden" id="submitMsg" name="submitMsg" value="Thank You for Submitting the Form" />
            <input type="submit" value="Submit Form" />
        </form>

    </div>

</div>

</body>
</html>
@toddparker

Can you-test on latest?
jquerymobile.com/test

@jeff-ph
@toddparker

Moved this into a jsBin using the latest for testing:
http://jsbin.com/oquqib/2/edit

@gseguin gseguin was assigned Jul 7, 2011
@jeff-ph

IE7 won't load the HTML code view of the jsBin. It does show the submit button on the render screen, but same behavior when clicked as I noted on June 30th (no error loading page, but the alert doesn't pop up).

@jblas

So the "Error Loading Page" problem went away when I landed the navigation refactoring because I added code to handle a missing @action attribute.

The IE7 problem of the alert not showing seems to be related to the fact that we are registering a live("submit") listener. I can reproduce the problem with this barebones, no jQuery Mobile involved, sample:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script>

$(function(){
    $( "#my-form" ).submit(function( e ){
        alert( "form submit triggered!" );
    });

    $( "form" ).live( "submit", function( e ){
        alert( "live submit triggered!" );
        e.preventDefault();
    });
});
</script>
</head>

<body>
<form id="my-form" method="post">
    <input type="hidden" name="foo" value="bar">
    <input type="submit" value="Submit">
</form>
</body>
</html>
@jeff-ph
@jblas

@scottjehl mentioned to me that jQuery 1.7 mentioned something about form event bubbling in the release notes. This made me take a look at the jQuery Core 1.6.4 implementation. Turns out that IE does not bubble form submit events so jQuery core executes some code that enables a special handling for submit bindings. When you bind to "submit" on IE, you are actually binding to "click" on submit buttons/images and a fake submit event is triggered in the click handler so that the event bubbles up the DOM hierarchy. This means our live() handler gets executed before the real submit event for the form is dispatched.

Looking at the implementation in jQuery core 1.7, it looks like they've tweaked this code a bit so that instead of firing the fake submit event on click ... they instead register a submit handler on the parent form of the button/image clicked, such that when the buttons are clicked, they wait till the form submit event dispatched from the browser is fired. The special form submit callback then kicks in and triggers the event on the parent of the form so that jQuery handles the bubbling manually.

We're shipping RC 1 today so this will probably have to wait till jQuery core 1.7 is released.

@staabm

Will jquery mobile be shipped with jquery core 1.6.4 or 1.7?

@toddparker

jQuery Mobile 1.0 final will ship with 1.7.

@jblas

@staabm

The rc1 release supposedly going out today will be against 1.6.4. After that we'll evaluate moving to 1.7 for the next rc release.

@staabm

Sounds good, thanks

@jeff-ph
@toddparker toddparker was assigned Oct 20, 2011
@Wilto Wilto was assigned Nov 1, 2011
@Wilto

Since this is more of a core issue—and falls under the greater task of ensuring full support for jQuery 1.7—I’m closing this out for the time being. Thanks for bringing it to our attention!

@Wilto Wilto closed this Nov 10, 2011
@johnbender

@jeffholmes, @staabm

We've got 1.7 support in master if you guys want to give it a try.

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
@ghost

has somebody tried it with jquery 1.7 ??
i do also have this issue in IE8 and it's really annoying... hate this M$ crap

@toddparker

AS @johnbender said, you'll probably have to wait for mobile 1.1 which supports 1.7.x to completely fix this IE bug. Working on it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment