I'm having difficulty passing the data returned from the server to the correct element in my code, although I can see the response in the developer tools and find seems to return the correct selector. The example is from the book found here. My JavaScript file:
$('nav a').on('click',function(e){
e.preventDefault()
var url = this.href
var $content = $('#content')
$('nav a.current').removeClass('current')
$(this).addClass('current')
$('#container').remove()
$.ajax({
type: "GET",
url: url,
timeout: 2000,
beforeSend: function(){
$content.append('<div id="load">Loading</div>')
},
complete: function(){
$('#load').remove()
},
success: function(data){
$content.html($(data).find('#container')).hide().fadeIn(500)
console.log($(data).find('#container')) // Object returned
},
error: function(){
$content.html('<div id="container">Please try again</div>')
}
})
})
The main HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery & Ajax $.ajax() Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/c08.css">
</head>
<body>
<header>
<h1>DEMO</h1>
<nav>
<a href="0038.html" class="current">HOME</a>
<a href="0038A.html">ROUTE</a>
<a href="0038B.html">TOYS</a>
</nav>
</header>
<section id="content" style="display: block;">
<div id="container">
<h2>Fifteen tons of fun!</h2>
<div class="third">
<img src="img/home1.jpg" alt="Quadcopter" />
<p>Roll up! Roll up! All aboard, for the magical maker bus ride. Next August, we're heading from the west coast to east coast, sharing the maker fun as we travel in our vintage Leyland bus.</p>
</div>
<div class="third">
<img src="img/home2.jpg" alt="Circuit boards" />
<p>Fly our JavaScript controlled quadcopters, filming the location from above as you soar with the birds. Or, if you prefer to stay on the ground, enter the maker jam.</p>
</div>
<div class="third">
<img src="img/home3.jpg" alt="Wheely thing" />
<p>The theme of this year's maker-jams is the future of travel. We'll be piling our bus high with arduinos, breadboards, controllers, diodes, engravers, files... Enter today.</p>
</div>
</div>
</section>
<script type="text/javascript" src="js/0038.js"></script>
</body>
</html>
The fragment for 0038A.html:
<div id="container" class="location">
<h2>The bus stops here.</h2>
<div class="event">
<img src="img/map-ca.png" alt="Map of San Francisco" />
<p><b>SAN FRANCISCO, CA</b><br />May 1</p>
</div>
<div class="event">
<img src="img/map-tx.png" alt="Map of Texas" />
<p><b>AUSTIN, TX</b><br />May 15</p>
</div>
<div class="event">
<img src="img/map-ny.png" alt="Map of New York" />
<p><b>NEW YORK, NY</b><br />May 30</p>
</div>
</div>
And the fragment for 0038B.html
<div id="container">
<h2>Tinker, maker, solder, fly.</h2>
<div class="third intro">
<p>We can't wait to load up Barney, our faithful bus, with the widest range of toys we've ever taken on the road... </p><p>This year sees some impressive stats as we will be bringing 15 team members, 50km of cable, 50 arduino compatible boards, 25 laptops, 20 tablets, 10 mobile phones, 5 quadcopter kits, and a giant laser strapped to the roof. </p><p>We're also bringing a big top, which will provide shelter throughout the night as well as hosting talks and demonstrations from an impressive range of guest speakers.</p><p>And yes, we did say that we have a giant laser strapped to the roof of the bus. Let's see how often we get stopped for speeding this time!</p>
</div>
<div class="third">
<img src="img/toys1.jpg" alt="Circuit boards" />
<p>Our new generator is so hefty we have to tow it on a dedicated trailer, but that's worth it because we're powering bigger projects than ever and we expect you to be tinkering throughout the night with our 24-hour maker-jams.</p>
</div>
<div class="third">
<img src="img/toys2.jpg" alt="Circuit boards" />
<p>Our state of the art 3D printer is ready to help you take your own souvenirs home! The only catch is that you have to design them. We'll add each one to our open-source 3D designs library, and the designer of the best one gets to keep the printer.</p>
</div>
</div>
I wouldn't ask, but this has me stumped, and I know it's something simple. Thanks.
J.
