Menu
I'm having some problems with getting one of my site pages with IE8. It works fine in IE9, Safari (both PC & Mac) & Firefox (Mac). I'm using a find(tag1).html(tag1) call sequence to do a title substitution, but I get the following error in IE8 when I debug it in the IE script debugger, and this in the html(tag2) function:
Unexpected call to method or property access
The find(tag1) function seems to return the enclosing object (i.e. #sidebar), rather than the nested object #sidebarheader, and this causes problems when later making the html(tag2) call.
I've created a representative test case as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery .find() test case</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
function UpdateHeader() {
$('#sidebar').find('header').html("New Title"); // IE8, nesting div's in the find fct. will not discover the child div
}
document.ready = UpdateHeader;
</script>
</head>
<body>
<div style="height: 400px; width: 390px">
<div id="jqm-home">
<div id="page">
<div id="sidebar">
<div id="sidebarheader">
<header>Old Title</header>
</div>
</div>
</div>
<p onclick="UpdateHeader();">Click to update title</p>
</div>
</div>
</body>
</html>
And here is the jsFiddle test case:
http://jsfiddle.net/bnmcK/21/
Has anybody a suggestion on how to get this to work in IE8?
808
In order to support the new HTML 5 elements in older versions of IE (8 and below), there's a handy trick, which involves creating a dummy element before running your script.
So, simply calling document.createElement('header'); in your page will solve the problem, see here.
For the full explanation, this post does a nice job of providing an explanation.
Also, html5shiv is a project that solves this problem for other elements too.
186
<header> is a HTML5 tag, which IE8 doesn't know about (IE9 however, supports this tag). Since you're declaring XHTML 1.0 transitional, I'd suggest using a <h1> tag instead, which will work just fine in IE8.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
