Bug Tracker

Ticket #4218: ajax-test2.html
File ajax-test2.html, 5.2 KB (added by manus, June 22, 2009 04:19PM UTC)

contains some tests for different selectors; hope this helps!

<!-- Modified from http://dev.jquery.com/attachment/ticket/4218/ajax-test.html -->
<html>
<head>
    <!-- jQuery 1.2.6 works for SOME selectors after dom replacement, but still misses some -->
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>-->

    <!-- Using jQuery 1.3.x shows the problem: SEVERAL selectors no longer work in FF after certain DOM manipulation. -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    
    <!-- Test with stephen.friedrich's patched version, which still misses some -->
    <!--<script type="text/javascript" src="http://dev.jquery.com/raw-attachment/ticket/4218/jquery-1.3.2.js"></script>-->
    
    <!-- Are we there yet? ;] -->
    <!--<script type="text/javascript" src="http://code.jquery.com/nightlies/jquery-nightly.js"></script>-->
</head>
<body>
    <!-- NOTE: here I capitalize one child DIV tag, leaving the others as lowercase -->
    <div id="test" class="testClass">parent (id="test" class="testClass")<div>one</div><div>two</div><DIV>THREE</DIV></div>
    
    <ol id="before"><strong>Before</strong> DOM replacement:</ol>
    <ol id="after"><strong>After</strong> DOM replacement:</ol>

    <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
        if (!$.browser.mozilla &&
            !$.browser.opera) {
            alert("These tests are for Firefox and may not run properly in this browser!");
            //return false;
        }
        var parser = new DOMParser();
                    // specifying xmlns only so parser works; not necessary in original document
        var markup = '<html xmlns="http://www.w3.org/1999/xhtml"><body>'
            + '<div id="test" class="testClass">parent (id="test" class="testClass")<div>one</div><div>two</div><DIV>THREE</DIV></div>'
            + '</body></html>';
        var doc = parser.parseFromString(markup, "text/xml");
        var body = $('body')[0];
        var newNode = doc.childNodes[0].childNodes[0].childNodes[0]; // html -> body -> div
        var oldNode = $('#test')[0];

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

        // this would work:
        //oldNode = newNode;
    }
    
    // spits out test results to HTML lists
    function writeCounts( jResults, idSuffix) {
        for (var i=0;i<jResults.length;i++) {
            $('<li/>')
            .attr('id','#selectorTest'+idSuffix+i)
            .text("'"+jResults[i].selector+"': "+
                    (jResults[i].length?
                    "found "+jResults[i].length+" "+jResults[i].get(0).tagName+"s":
                    "NO RESULT!"))
            .appendTo('#'+idSuffix.toLowerCase());
        }
    }

    // returns some tests using different kinds of selectors
    function testSelections() {
        var testSelections =
            [   // "after" numbers based on results in FF 3.0.x/2.x; I'm told it's different in 3.5 (see also Opera)?

            // select ALL                   // expected: 4
            $('div'),                       // after DOM replacement: 3
            $('DIV'),                       // after DOM replacement: 3
            
            // select the parent ONLY       // expected: 1
            $('#test'),                     // after DOM replacement: 1
            $('.testClass'),                // after DOM replacement: 1
            $('div#test'),                  // after DOM replacement: NO RESULT! (or 1, using patch)
            $('div.testClass'),             // after DOM replacement: NO RESULT! (or 1, using patch OR in FF 2.0.x)
            $('div[id=test]'),              // after DOM replacement: 1
            $('div[class=testClass]'),      // after DOM replacement: 1
            
            // select the children ONLY     // expected: 3
            $('div div'),                   // after DOM replacement: NO RESULT! (or 2, using patch)
            $('div DIV'),                   // after DOM replacement: NO RESULT! (or 2, using patch)
            $('div').find('div'),           // after DOM replacement: 2
            $('div').find('DIV'),           // after DOM replacement: 1 (notice tagName case matches after replacement)
            $('#test div'),                 // after DOM replacement: 2
            $('.testClass div'),            // after DOM replacement: 2
            $('div[id!=test]'),             // after DOM replacement: 2
            $('div[class!=testClass]'),     // after DOM replacement: 2
            $('div[id=test] div'),          // after DOM replacement: NO RESULT! (or 2, using patch)
            $('div[class=testClass] div')   // after DOM replacement: NO RESULT! (or 2, using patch)
            ];
        return testSelections;
    }
    
    // runs the tests when the doc is ready
    $( function () {
            writeCounts(testSelections(),'Before');
            simulateA4j();
            writeCounts(testSelections(),'After');
        });
    --></script>
</body>
</html>

Download in other formats:

Original Format