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?
