After seeing many questions about how jQuery.load() handles tags in the content to be loaded, I see that jQuery strips out inline tags. But, I'd like to use Kontactr for the contact page in my site, and the much nicer AJAX embed they have is two script tags as in the code examples below. How can I work around the jQuery.load() constraints to make these script tags run in the jQuery.load(file, callback()) callback() function?
index.html
<html>
<head>
<!--include css, jquery, scripts -->
<script type="text/javascript">
$(document).ready(function() {
$('#main_content').load('contact.html #main_content', function(){
//what can I put here to run the Kontactr inline script code
//when contact.html is loaded?
});
});
</script>
</head>
<body>
<div id="main_content"><!--content will load here--></div>
</body>
</html>
contact.html
<div id="main_content">
<h1>Please Contact Us With The Form Below</h1>
<!-- jQuery.load will strip out these script tags
and the form will not be embedded. -->
<script type="text/javascript"> id = 1; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>
</div>
I've thought maybe I can put a <div id="contact_form"/> in contact.html and then maybe eval the script tags in the callback function inside of
$('#contact_form').html(//eval script tags result here);, but I'm not sure how to do that syntactically.