Bug Tracker

Ticket #4218: ajax-test.html

File ajax-test.html, 2.1 KB (added by stephen.friedrich, February 23, 2009 11:13AM UTC)

Here's a test file to reproduce the behaviour

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- Using jQuery 1.3.x shows the problem: The selector "tr td" no longer works. -->
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

        <!-- jQuery 1.2.6 works on lower case nodeNames, too, so "tr td" works fine, even after dom replacement -->
        <!--<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>-->
    </head>
    <body>
        <table id="testTable"><tr><td>One</td></tr><tr><td>Two</td></tr></table>

        Rows in table before DOM replacement: <span id="rowCountOld"></span><br>
        Rows in table after DOM replacement: <span id="rowCountNew"></span>

        <script type="text/javascript">
            /**
             * Simulates an Ajax4JSF request by parsing XML and using it to replace a DOM element in the original document.
             */
            function simulateA4j() {
                // This is faked. A real a4j request would read the document from XMLHttpRequest.responseXML
                var parser = new DOMParser();
                var tableText = '<html xmlns="http://www.w3.org/1999/xhtml"><body>'
                        + '<table id="testTable"><tr><td>One</td></tr><tr><td>Two</td></tr></table>'
                        + '</body></html>';
                var doc = parser.parseFromString(tableText, "text/xml");

                var body = $('body')[0];
                var newNode = doc.childNodes[0].childNodes[0].childNodes[0]; // html -> body -> table
                var oldNode = $('#testTable')[0];

                // This is how a4j actually does the replacement on FF (on IE outerHtml is used)
                body.replaceChild(newNode, oldNode);
            }

            $('#rowCountOld').text($('tr td').length); // "2"

            simulateA4j();

            $('#rowCountNew').text($('tr td').length); // should be "2", is "0" when using jQuery 1.3.x
        </script>

    </body>
</html>

Download in other formats:

Original Format