Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use ajax to load new page into div

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>
like image 414
hypermiler Avatar asked Jan 07 '14 21:01

hypermiler


2 Answers

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.

like image 70
Aidiakapi Avatar answered Sep 23 '22 17:09

Aidiakapi


You have a # symbol in the load url.

Also, why don't you use:

$("#div1").load("myPage2.html");
like image 39
Qiang Avatar answered Sep 25 '22 17:09

Qiang