Using Jquery and AJAX to load html file into a div

Question

After being very helpfully pointed to AJAX and jquery as an answer to an earlier question, I found much helpful documentation, examples and questions. Particularly this...

Replace innerhtml with external page

But after banging my head against a brick wall for what seems like forever, I just can't get it to work! Hopefully it's something glaringly obvious to you guys! Again, thanks in advance!

Here's what I have...

<head>

	<link rel="stylesheet" type="text/css" href="css/new1.css" />
		
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		
		<script type="text/javascript">
			$(document).ready(
				function navclick(which) {
					$('#container').load(which + '.html');
				}
			)
		</script>
		
</head>

<body id="main">

	<div>
	
		<a href="javascript: void(0)" onclick="navclick('page1')">Page 1</a>
		<a href="javascript: void(0)" onclick="navclick('page2')">Page 2</a>
	
	</div>
	
	<div id="container">
		<p>Placeholder text</p>
	</div>
	
	
</body>

Take your method out of the document ready and make it just a normal method and see if your onclicks start working. — Taplar
– Taplar, Commented Nov 21, 2017 at 16:03
Thanks for the speedy reply, unfortunately, that doesn't solve the problem. :( — Matthew Xly
– Matthew Xly, Commented Nov 21, 2017 at 16:09
Look at your network console and see if it is making the requests, and verify if they are being made that they are returning with a non-error response code — Taplar
– Taplar, Commented Nov 21, 2017 at 16:10
I am getting an error by the looks of it... Failed to load file:///E:/Dancefactors%20-%20new%20site/Test/function: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. send @ jquery.js:4 ajax @ jquery.js:4 r.fn.load @ jquery.js:4 navclick @ test.html:10 j @ jquery.js:2 k @ jquery.js:2 setTimeout (async) (anonymous) @ jquery.js:2 i @ jquery.js:2 fireWith @ jquery.js:2 fire @ jquery.js:2 i @ jquery.js:2 fireWith @ jquery.js:2 ready @ jquery.js:2 S @ jquery.js:3 — Matthew Xly
– Matthew Xly, Commented Nov 21, 2017 at 16:18
The first error is telling you that you can't use ajax over file:///. Use a local webserver instead so you can serve over http://. And also do what Taplar said in the first comment - that will remove your Uncaught Reference error. There's no need to define a function within document.ready, since it won't be executed until it's called anyway. document.ready is only to stop code which would normally be executed immediately it was loaded, from executing until the DOM is fully complete. — ADyson
– ADyson, Commented Nov 21, 2017 at 16:30

emshore · Accepted Answer · 2017-11-21 16:34:40Z

0

I believe this should do it:

$(function() {
  $('.nav').click(function(e) {
    e.preventDefault();
    var url = $(this).attr("name") + '.html';
    $("#container").load(url);
  });
});

<link rel="stylesheet" type="text/css" href="css/new1.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div>
  <a href="#" name="page1" class="nav">Page 1</a>
  <a href="#" name="page2" class="nav">Page 2</a>
</div>

<div id="container">
  <p>Placeholder text</p>
</div>

answered Nov 21, 2017 at 16:34

emshore

4876 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Jquery and AJAX to load html file into a div

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related