Menu
I am trying to retrieve the JSON files when clicking on the navigation tabs in this webpage. While the text will italicize when I hover the mouse over it, I cannot click on the tabs to retrieve the JSON information. What in the code do I need to change to ensure that the tabs on the navigation bar are click-able?
$(document).ready(function () {
//on click for <a> element
$("a").click(function () {
var title = $(this).attr("title");
getJSON(title+".json");
});
}); // end ready
function getJSON(jsonFileURL) {
$.ajax({
url: jsonFileURL,
//handle as text
dataType: "text",
success: function (data) {
//data downloaded + pass data
var json = $.parseJSON(data);
// display results
$("main > h2").html(json.speakers[0].month + "<br/>" + json.speakers[0].speaker);
$("main > h1").html(json.speakers[0].title);
$("main > img").attr("src", json.speakers[0].image);
$("main > p").html(json.speakers[0].text);
}
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load Speaker Files</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="speaker.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
<h1><a id="top">San Joaquin Valley Town Hall</a></h1>
<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
</header>
<main>
<h1>The Supreme Nine: Black Robed Secrets</h1>
<img src="images/toobin_court.jpg">
<h2>October<br>Jeffrey Toobin</h2>
<p>Author of the critically acclaimed best seller, The Nine: Inside the
Secret World of the Supreme Court, Jeffrey Toobin brings the inside
story of one of America's most mysterious and powerful institutions to
the Saroyan stage. At the podium, Toobin is an unbiased, deeply analytic
expert on American law, politics and procedure and he provides a unique
look into the inner workings of the Supreme Court and its influence.
</p>
</main>
<aside>
<h1 id="speakers">This Year’s Speakers</h1>
<nav id="nav_list">
<ul>
<li><a id="speakers" onclick = "ready()" title="toobin">October<br>Jeffrey Toobin</a></li>
<li><a id="speakers" onclick = "ready()" title="sorkin">November<br>Andrew Ross Sorkin</a id="myAnchor" onclick = "ready()"a></li>
<li><a id="speakers" onclick = "ready()" title="chua">January<br>Amy Chua</a></li>
<li><a id="speakers" onclick = "ready()" title="sampson">February<br>Scott Sampson</a></li>
</ul>
</nav>
</aside>
<footer>
<p>© 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>
805
asked Jun 20 '26 13:06
I gave Id to main tag and used a href instead of id in nav_list. Also I changed .js file a little. I believe this should work. Here is .js file;
$(document).ready(function () {
//on click for <a> element
$("a").click(function () {
var t_atr = $(this).attr("title");
var url = ("json_files/"+t_atr+".json"); //path to .json files
$.getJSON(url, function(json) {
json.speakers.forEach(element => {
console.log(element); //check data
$('#title').html(element.title);
$('#image').attr('src',element.image);
$('#monthspeak').html(element.month+"<br>"+element.speaker);
$('#text').html(element.text);
});
});
});
});
Here is the changing part in .html file;
<main id="mn"> //gave id
<h1 id="title">The Supreme Nine: Black Robed Secrets</h1>
<img id="image" src="images/toobin_court.jpg">
<h2 id="monthspeak">October<br>Jeffrey Toobin</h2>
<p id="text">Author of the critically acclaimed best seller, The Nine: Inside the
Secret World of the Supreme Court, Jeffrey Toobin brings the inside
story of one of America's most mysterious and powerful institutions to
the Saroyan stage. At the podium, Toobin is an unbiased, deeply analytic
expert on American law, politics and procedure and he provides a unique
look into the inner workings of the Supreme Court and its influence.
</p>
</main>
<aside>
<h1 id="speakers">This Year’s Speakers</h1>
<nav id="nav_list">
<ul>
<li><a href="#" title="toobin">October<br>Jeffrey Toobin</a></li> //use a href="#"
<li><a href="#" title="sorkin">November<br>Andrew Ross Sorkin</a></li>
<li><a href="#" title="chua">January<br>Amy Chua</a></li>
<li><a href="#" title="sampson">February<br>Scott Sampson</a></li>
</ul>
</nav>
</aside>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With