0

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>
michael
  • 167
  • 5
  • 23
  • where does content reside in the file system relative to index.html? Are there any errors that appear in the developer console? – gh9 Aug 08 '14 at 19:17
  • You only want to load the specific HTML content you want displayed, not the ` `, `` or `` tags. – Malovich Aug 08 '14 at 19:19
  • @gh9 Ooh, I see an error: XMLHttpRequest cannot load file:///G:/ajax2.html. Received an invalid response. Origin 'null' is therefore not allowed access. – michael Aug 08 '14 at 19:26
  • 1
    http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin – mccannf Aug 08 '14 at 20:18
  • what is – zod Aug 08 '14 at 20:35

1 Answers1

1

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");
user2391174
  • 138
  • 10