Here’s test.html :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script language=javascript>
$(document).ready(function() {
$("button").click( function() {
$.ajax({
url : "http://localhost:101/test2.html",
dataType : "html",
success: function(data){ alert(data); $("div").html(data); }
});
});
});
/*
$(document).ready(function() {
$.ajax({
url : "http://localhost:101/Scripts/testscript.js",
dataType : "script"
//success: function(data){ $("#inner-main").html(data); }
});
});
*/
</script>
<button> bleh </button>
<div> </div>
</body>
</html>
Here’s test2.html :
<script type=javascript>
alert("lock and load, outside!");
$(document).ready(function () {
alert("lock and load!");
});
</script>
<p>Hello, world </p>
I cannot get test1 to load test2 and execute scripts in it.
I do get < p > (Hello World) to display in the div. The scripts though, do not execute.
The only alert I see is from the function called on success.
What am I doing wrong ?
The URL to test1.html is http://localhost:101/test1.html
In both your scripts, change
<script language=javascript>and<script type=javascript>to
It will work.
Before learning and using AJAX, I recommend you learn valid HTML first. This is not valid HTML so why would jQuery or even browser will compile it correctly?