ajax.load() seems unable to load HTML5 tags under IE
Hello,
I have a problem when trying to load an HTML5 element with Ajax (jQuery.load ()).
Here is a simplified example of the problem.
Main page :
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Title</title>
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <script type="text/javascript" src="js/jquery/jquery.js"></script>
- <script type="text/javascript">
- <!--
- $(document).ready(function() {
- $("#loadDivHere").load('ajax/test-ie.php #myDiv');
- $("#loadArticleHere").load('ajax/test-ie.php #myArticle');
- });
- -->
- </script>
- </head>
- <body>
- <section id="loadDivHere"></section>
- <section id="loadArticleHere"></section>
- </body>
- </html>
Page "ajax/test-ie.php" :
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Title</title>
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- </head>
- <body>
- <div id="myDiv">The Div</div>
- <article id="myArticle">The Article</article>
- </body>
Result under Firefox, Chrome, Opera, ... :
Result under IE7, IE8 :
jQuery.load () seems unable to load HTML5 elements under IE7/8 (I guess that the problem comes from IE, once again). Loading a div into a section works. Loading a section into a div doesn't.
Second example (same problem, more details)
Same main page.
Page "ajax/test-ie.php" :
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Title</title>
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- </head>
- <body>
- <div id="myDiv">
- <h1>The Div</h1>
- <article>Article in the Div</article>
- </div>
- <article id="myArticle">
- <h1>The Article</h1>
- <div>Div in the Article</div>
- </article>
- </body>
Result under Firefox, Chrome, Opera, ... :
The Div
Article in the Div
The Article
Div in the Article
Result under IE7, IE8 :
The Div
... no comment :/