jquery - loading inline javascript via AJAX

Question

I have thrown together a quick prototype to try and establish a few very basic truths regarding what inline JavaScript can do when it is loaded with AJAX:

index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head>
    <body>
            <script type="text/javascript">
                    $('p').css('color','white');
                    alert($('p').css('color'));
                    // DISPLAYS FIRST but is "undefined"

                    $(document).ready(function(){
                        $('#ajax-loaded-content-wrapper').load('loaded-by-ajax.html', function(){
                            $('p').css('color','grey');
                            alert($('p').css('color'));
                            // DISPLAYS LAST (as expected)
                        });
                        $('p').css('color','purple');
                        alert($('p').css('color'));
                        // DISPLAYS SECOND
                    });
            </script>
            <p>Content not loaded by ajax</p>
            <div id="ajax-loaded-content-wrapper">
            </div>
    </body>
</html>

loaded-by-ajax.html

<p>Some content loaded by ajax</p>

<script type="text/javascript">

    $('p').css('color','yellow');
    alert($('p').css('color'));
    // DISPLAYS THIRD

    $(document).ready(function(){
        $('p').css('color','pink');
        alert($('p').css('color'));
        // DISPLAYS FOURTH
    });

</script>

<p>Some content loaded by ajax</p>

<script type="text/javascript">

    $(document).ready(function(){
        $('p').css('color','blue');
        alert($('p').css('color'));
        // DISPLAYS FIFTH
    });

    $('p').css('color','green');
    alert($('p').css('color'));
    // DISPLAYS SIX

</script>

<p>Some content loaded by ajax</p>

Notes:

a) All of the above (except the first) successfully change the colour of all the paragraphs (in firefox 3.6.3).
b) I've used alert instead of console.log as console is undefined when called in the 'loaded' HTML.

Truths(?):

$(document).ready() does not treat the 'loaded' HTML as a new document, or reread the entire DOM tree including the loaded HTML, it is pointless inside AJAX loaded content
JavaScript that is contained inside 'loaded' HTML can effect the style of existing DOM nodes
One can successfully use the jQuery library inside 'loaded' HTML to effect the style of existing DOM nodes
One can not use the firebug inside 'loaded' HTML can effect the existing DOM (proven by Note a)

Am I correct in deriving these 'truths' from my tests (test validity)?
If not, how would you test for these?

Answer 1

We can narrow it down to one even simpler truth: all the .load() function does is add content to your page .

Regarding #1, the document is already loaded, so no, you are not loading a whole new document. You are merely adding content in the middle of the document that's already there. However, the nodes really are added to the DOM where you've asked that they be added. This doesn't require "rereading the entire DOM tree," but the effect is the same.

You're correct on #2: any JavaScript you inject onto your page can absolutely affect anything on your page in any way, including its styles. The newly loaded scripts have no way to know which elements were there before and which are new; it just sees the DOM as it currently exists.

You're likewise correct on #3. jQuery is on the page, and the new script has no idea that it was loaded separately. It's just code being executed on your page.

You're incorrect on #4. Firebug is a fantastic tool for analyzing what's currently on the page, regardless of how it got there. You'll always see the current DOM in Firebug, and it will even highlight (in yellow) any changes as they're made in real time.

jquery - loading inline javascript via AJAX

Question

index.html

loaded-by-ajax.html

Notes:

Truths(?):

1 answers

solution1
2 ACCPTED 2010-06-01 22:50:07

jquery - loading inline javascript via AJAX

Question

index.html

loaded-by-ajax.html

Notes:

Truths(?):

1 answers

solution1 2 ACCPTED 2010-06-01 22:50:07

solution1
2 ACCPTED 2010-06-01 22:50:07