Bug Tracker

Ticket #4218: ajax-test.html

File ajax-test.html, 2.1 KB (added by stephen.friedrich, 13 years ago)

Here's a test file to reproduce the behaviour

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4    <head>
5        <!-- Using jQuery 1.3.x shows the problem: The selector "tr td" no longer works. -->
6        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
7
8        <!-- jQuery 1.2.6 works on lower case nodeNames, too, so "tr td" works fine, even after dom replacement -->
9        <!--<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>-->
10    </head>
11    <body>
12        <table id="testTable"><tr><td>One</td></tr><tr><td>Two</td></tr></table>
13
14        Rows in table before DOM replacement: <span id="rowCountOld"></span><br>
15        Rows in table after DOM replacement: <span id="rowCountNew"></span>
16
17        <script type="text/javascript">
18            /**
19             * Simulates an Ajax4JSF request by parsing XML and using it to replace a DOM element in the original document.
20             */
21            function simulateA4j() {
22                // This is faked. A real a4j request would read the document from XMLHttpRequest.responseXML
23                var parser = new DOMParser();
24                var tableText = '<html xmlns="http://www.w3.org/1999/xhtml"><body>'
25                        + '<table id="testTable"><tr><td>One</td></tr><tr><td>Two</td></tr></table>'
26                        + '</body></html>';
27                var doc = parser.parseFromString(tableText, "text/xml");
28
29                var body = $('body')[0];
30                var newNode = doc.childNodes[0].childNodes[0].childNodes[0]; // html -> body -> table
31                var oldNode = $('#testTable')[0];
32
33                // This is how a4j actually does the replacement on FF (on IE outerHtml is used)
34                body.replaceChild(newNode, oldNode);
35            }
36
37            $('#rowCountOld').text($('tr td').length); // "2"
38
39            simulateA4j();
40
41            $('#rowCountNew').text($('tr td').length); // should be "2", is "0" when using jQuery 1.3.x
42        </script>
43
44    </body>
45</html>