CODEWITHSUNDEEP
jqueryhtmlajaxload
michael
michael

Reputation: 167

jQuery - AJAX load() Method isn't working

I'm trying to dynamically change the content of a div (#div1) with content from another HTML file (content.html) when a button is clicked (as is done here), but nothing happens when the button is clicked. Not to mention, the files are located side-by-side in a folder, so I'm really stumped.

Here's my code:

index.html:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("content.html");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>

content.html:

<!DOCTYPE html>
<html>
<body>
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
</body>
</html>

Upvotes: 0

Views: 585

Answers (1)

user2391174
user2391174

Reputation: 138

Use a server

Mostly ajax issues are due to the Same Origin Policy. There are many ways to fix this, I recommend you to use a local webserver. Setting up a local webserver is really easy:

you can use LAMP, MAMP, WAMP, or XAMPP. Those are all free and easy to use. If you aren't scared to use the command line:

Select only the body...

Mostly, you don't want a second doctype in your code, so replace

$("#div1").load("content.html");

With

$("#div1").load("content.html body");

Upvotes: 1

Related Questions