My site consists of two pages. I'm trying to load Page 2 into a div on page one, then display page 2 onclick. I'm trying to use the following code which isn't working. I'm a newbie so my apologies if this is just dumb question.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"myPage2.html",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
Your problem isn't your code. As you can see in this Plnkr it runs without any problems.
The .load()
function can simplify your current code, but it won't solve your real problem, since it's just syntax sugar.
For some reason your browser fails to locate myPage2.html
, and therefore can't display it correctly.
You have a #
symbol in the load url.
Also, why don't you use:
$("#div1").load("myPage2.html");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With