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> |
---|