Bug Tracker

Ticket #4218: ajax-test2.html

File ajax-test2.html, 5.2 KB (added by manus, 13 years ago)

contains some tests for different selectors; hope this helps!

Line 
1<!-- Modified from http://dev.jquery.com/attachment/ticket/4218/ajax-test.html -->
2<html>
3<head>
4    <!-- jQuery 1.2.6 works for SOME selectors after dom replacement, but still misses some -->
5    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>-->
6
7    <!-- Using jQuery 1.3.x shows the problem: SEVERAL selectors no longer work in FF after certain DOM manipulation. -->
8    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
9   
10    <!-- Test with stephen.friedrich's patched version, which still misses some -->
11    <!--<script type="text/javascript" src="http://dev.jquery.com/raw-attachment/ticket/4218/jquery-1.3.2.js"></script>-->
12   
13    <!-- Are we there yet? ;] -->
14    <!--<script type="text/javascript" src="http://code.jquery.com/nightlies/jquery-nightly.js"></script>-->
15</head>
16<body>
17    <!-- NOTE: here I capitalize one child DIV tag, leaving the others as lowercase -->
18    <div id="test" class="testClass">parent (id="test" class="testClass")<div>one</div><div>two</div><DIV>THREE</DIV></div>
19   
20    <ol id="before"><strong>Before</strong> DOM replacement:</ol>
21    <ol id="after"><strong>After</strong> DOM replacement:</ol>
22
23    <script type="text/javascript"><!--
24    /**
25     * Simulates an Ajax4JSF request by parsing XML and using it to replace a DOM element in the original document.
26     */
27    function simulateA4j() {
28        // This is faked. A real a4j request would read the document from XMLHttpRequest.responseXML
29        if (!$.browser.mozilla &&
30            !$.browser.opera) {
31            alert("These tests are for Firefox and may not run properly in this browser!");
32            //return false;
33        }
34        var parser = new DOMParser();
35                    // specifying xmlns only so parser works; not necessary in original document
36        var markup = '<html xmlns="http://www.w3.org/1999/xhtml"><body>'
37            + '<div id="test" class="testClass">parent (id="test" class="testClass")<div>one</div><div>two</div><DIV>THREE</DIV></div>'
38            + '</body></html>';
39        var doc = parser.parseFromString(markup, "text/xml");
40        var body = $('body')[0];
41        var newNode = doc.childNodes[0].childNodes[0].childNodes[0]; // html -> body -> div
42        var oldNode = $('#test')[0];
43
44        // This is how a4j actually does the replacement on FF (on IE outerHtml is used)
45        body.replaceChild(newNode, oldNode);
46
47        // this would work:
48        //oldNode = newNode;
49    }
50   
51    // spits out test results to HTML lists
52    function writeCounts( jResults, idSuffix) {
53        for (var i=0;i<jResults.length;i++) {
54            $('<li/>')
55            .attr('id','#selectorTest'+idSuffix+i)
56            .text("'"+jResults[i].selector+"': "+
57                    (jResults[i].length?
58                    "found "+jResults[i].length+" "+jResults[i].get(0).tagName+"s":
59                    "NO RESULT!"))
60            .appendTo('#'+idSuffix.toLowerCase());
61        }
62    }
63
64    // returns some tests using different kinds of selectors
65    function testSelections() {
66        var testSelections =
67            [   // "after" numbers based on results in FF 3.0.x/2.x; I'm told it's different in 3.5 (see also Opera)?
68
69            // select ALL                   // expected: 4
70            $('div'),                       // after DOM replacement: 3
71            $('DIV'),                       // after DOM replacement: 3
72           
73            // select the parent ONLY       // expected: 1
74            $('#test'),                     // after DOM replacement: 1
75            $('.testClass'),                // after DOM replacement: 1
76            $('div#test'),                  // after DOM replacement: NO RESULT! (or 1, using patch)
77            $('div.testClass'),             // after DOM replacement: NO RESULT! (or 1, using patch OR in FF 2.0.x)
78            $('div[id=test]'),              // after DOM replacement: 1
79            $('div[class=testClass]'),      // after DOM replacement: 1
80           
81            // select the children ONLY     // expected: 3
82            $('div div'),                   // after DOM replacement: NO RESULT! (or 2, using patch)
83            $('div DIV'),                   // after DOM replacement: NO RESULT! (or 2, using patch)
84            $('div').find('div'),           // after DOM replacement: 2
85            $('div').find('DIV'),           // after DOM replacement: 1 (notice tagName case matches after replacement)
86            $('#test div'),                 // after DOM replacement: 2
87            $('.testClass div'),            // after DOM replacement: 2
88            $('div[id!=test]'),             // after DOM replacement: 2
89            $('div[class!=testClass]'),     // after DOM replacement: 2
90            $('div[id=test] div'),          // after DOM replacement: NO RESULT! (or 2, using patch)
91            $('div[class=testClass] div')   // after DOM replacement: NO RESULT! (or 2, using patch)
92            ];
93        return testSelections;
94    }
95   
96    // runs the tests when the doc is ready
97    $( function () {
98            writeCounts(testSelections(),'Before');
99            simulateA4j();
100            writeCounts(testSelections(),'After');
101        });
102    --></script>
103</body>
104</html>