#12455 closed bug (cantfix)

Opened September 04, 2012 10:23AM UTC

Closed September 13, 2012 01:29PM UTC

Last modified September 13, 2012 01:42PM UTC

Button click occurs when Enter is pressed in text input

Reported by:	belerweb	Owned by:	belerweb
Priority:	low	Milestone:	None
Component:	event	Version:	1.8.0
Keywords:		Cc:
Blocked by:		Blocking:

Description

I load a page into a div using '.load()' method. The loaded page have a text input element, no form.

When press 'Enter' key in the text input, the page will be load again.

I have wrote a sample test code as flows:

test.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#load-page-into-page').click(function() {
			$('#page').load('page.html');
		});
	});
</script>
</head>
<body>
	<button id="load-page-into-page">Load page into page</button>
	<div id="page" style="border: 1px solid; padding: 20px;"></div>
</body>
</html>

page.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="page.js"></script>
</head>
<body>
	<input type="text" value="Press 'Enter' key here" style="width: 200px;" />
</body>
</html>

page.js:

alert('test.js loaded.');

Steps：

1. Open test.html

2. Click button 'Load page into page'.

3. Press 'Enter' key in the input 'Press 'Enter' key here"'.

Expect:

Nothing happend where press 'Enter' key.

Bug:

The page 'page.html' is loaded again and you can get the alert 'alert('test.js loaded.');',

Testcase:

IE7 standard: OK.

IE8 & IE9 standard: Failed.

Firefox: OK.

jQuery version: 1.7 - 1.8

Attachments (0)

Change History (9)

Changed September 04, 2012 12:25PM UTC by belerweb comment:1

test.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#load-page-into-page').click(function() {
			$('#page').load('page.html');
		});
	});
</script>
</head>
<body>
	<button id="load-page-into-page">Load page into page</button>
	<div id="page" style="border: 1px solid; padding: 20px;"></div>
</body>
</html>

Changed September 04, 2012 12:26PM UTC by belerweb comment:2

page.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="page.js"></script>
</head>
<body>
	<input type="text" value="Press 'Enter' key here" style="width: 200px;" />
</body>
</html>

Changed September 04, 2012 02:51PM UTC by timmywil comment:3

component:	unfiled → ajax
owner:	→ belerweb
priority:	undecided → low
status:	new → pending

Thanks for taking the time to contribute to the jQuery project!

Do you have this test hosted somewhere?

Changed September 05, 2012 01:45AM UTC by belerweb comment:4

status:	pending → new

Sorry for there is no hosted test. I am trying to use jsFiddle. But the 'load' method can not be executed on jsFiddle.

I have submit all the code (test.html, page.html and page.js) in comments. You can put the three sample file in any host to test.

Changed September 08, 2012 05:20PM UTC by mikesherov comment:5

status:	new → pending

Thanks for contributing! You can not include an entire page, doctype and all, into the contents of an element on a page and expect predictable results. Please provide an example that only loads the the scripts and the contents of the body and see what happens. If you're still having issues, please seek help on the forum, stackoverflow, or IRC first before coming back to report the bug. Thanks!

Changed September 13, 2012 08:15AM UTC by belerweb comment:6

status:	pending → new

Replying to [comment:5 mikesherov]:

Thanks for contributing! You can not include an entire page, doctype and all, into the contents of an element on a page and expect predictable results. Please provide an example that only loads the the scripts and the contents of the body and see what happens. If you're still having issues, please seek help on the forum, stackoverflow, or IRC first before coming back to report the bug. Thanks!

'Only loads the the scripts and the contents of the body' is same as 'include an entire page' .

And I create a sample demo hosted at http://jsfiddle.net/NSzRd/.

Changed September 13, 2012 01:29PM UTC by dmethvin comment:7

_comment0:	The fiddle is still incorrect, here is a cleaned-up version: \ http://jsfiddle.net/dmethvin/NSzRd/2/ \ \ It has nothing to do with $.ajax, this is a simpler test case: \ http://jsfiddle.net/dmethvin/NSzRd/4/ \ \ The default is `type=submit` for a button. \ http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#edef-BUTTON \ \ IE triggers a submit button if there is only one submit button and one text input on the page and you press Enter in that input. If you set the button to `type=button` the problem goes away: \ http://jsfiddle.net/dmethvin/NSzRd/5/ \ \ Note that older versions of IE default to `type=button` and newer versions may as well if they're in various compatibility views, so specifying it explicitly is a good idea if you want consistent behavior. \ http://msdn.microsoft.com/en-us/library/ie/ms535211(v=vs.85).aspx \ \ Because of the complex interaction IE has here, this is not something I think we can reliably normalize across browsers. Fortunately, the solution is really easy, just add `type=button` to your buttons unless you really want them to be submit buttons. \ → 1347658363366690
resolution:	→ cantfix
status:	new → closed

The fiddle is still incorrect, here is a cleaned-up version:

http://jsfiddle.net/dmethvin/NSzRd/2/

It has nothing to do with $.ajax, this is a simpler test case:

http://jsfiddle.net/dmethvin/NSzRd/3/

The default is type=submit for a button.

http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#edef-BUTTON

IE triggers a submit button if there is only one submit button and one text input on the page and you press Enter in that input. If you set the button to type=button the problem goes away:

http://jsfiddle.net/dmethvin/NSzRd/5/

Note that older versions of IE default to type=button and newer versions may as well if they're in various compatibility views, so specifying it explicitly is a good idea if you want consistent behavior.

http://msdn.microsoft.com/en-us/library/ie/ms535211(v=vs.85).aspx

Because of the complex interaction IE has here, this is not something I think we can reliably normalize across browsers. Fortunately, the solution is really easy, just add type=button to your buttons unless you really want them to be submit buttons.

Changed September 13, 2012 01:34PM UTC by dmethvin comment:8

component:	ajax → event
summary:	Trigger second execution when press 'Enter' in a page loaded by '.load' method. → Button click occurs when Enter is pressed in text input

Changed September 13, 2012 01:42PM UTC by scottgonzalez comment:9

FWIW, I think browser vendors are still arguing over what the correct behavior is for cases like this.

Side navigation