jquery - loading inline javascript via AJAX
Posted
by yaya3
on Stack Overflow
See other posts from Stack Overflow
or by yaya3
Published on 2010-06-01T22:38:38Z
Indexed on
2010/06/02
22:54 UTC
Read the original article
Hit count: 479
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?
© Stack Overflow or respective owner
