JavaScript code for loading data JSON files

up vote
3
down vote

favorite

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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

asked Nov 10 at 21:30

Samantha Hayes

101

Get rid of the onclick if you use jQuery event listeners. Also ID's can't be repeated in a page, they are unique by definition
– charlietfl
Nov 10 at 21:33

add a comment |

up vote
3
down vote

favorite

$(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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

asked Nov 10 at 21:30

Samantha Hayes

101

Get rid of the onclick if you use jQuery event listeners. Also ID's can't be repeated in a page, they are unique by definition
– charlietfl
Nov 10 at 21:33

add a comment |

up vote
3
down vote

favorite

$(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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

asked Nov 10 at 21:30

Samantha Hayes

101

$(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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

$(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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

$(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&rsquo;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>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

javascript jquery html json

asked Nov 10 at 21:30

Samantha Hayes

101

asked Nov 10 at 21:30

Samantha Hayes

101

asked Nov 10 at 21:30

Samantha Hayes

101

asked Nov 10 at 21:30

Samantha Hayes

101

asked Nov 10 at 21:30

Samantha Hayes

101

Get rid of the onclick if you use jQuery event listeners. Also ID's can't be repeated in a page, they are unique by definition
– charlietfl
Nov 10 at 21:33

add a comment |

Get rid of the onclick if you use jQuery event listeners. Also ID's can't be repeated in a page, they are unique by definition
– charlietfl
Nov 10 at 21:33

Get rid of the onclick if you use jQuery event listeners. Also ID's can't be repeated in a page, they are unique by definition
– charlietfl
Nov 10 at 21:33

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

I made some small changes to your code and it should work, as long as you have the json files available on the server. You had some errors on onclick = "ready()" and if you use jQuery click function you don't need to use onlick attribute.

$(document).ready(function () {

    //on click for <a> element

    $("a").click(function () {

        var title = $(this).attr("title");        

        getJSON(title+".json");

    });



}); // end ready

function getJSON(jsonFileURL) {

    alert(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&rsquo;s Speakers</h1>

       <nav id="nav_list">

           <ul>

               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>

               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>

               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>

               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>

           </ul>

       </nav>

   </aside>

   <footer>

       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

Thank you! I am still not getting any new text when I select the tabs, however. Is the id="speakers" not correct? Is it supposed to be id="toobin.json" (for example)?
– Samantha Hayes
Nov 10 at 21:48

You are making a Ajax request to a file with the url, and there is no file
– João Pimentel Ferreira
Nov 10 at 22:27

add a comment |

up vote
0
down vote

Without having access to the json files I can tell you off the bat that your click handler is targeting all <a> elements so I would remove the onclick="ready()" attributes. $(document).ready() is a jQuery function that will execute the code after the document is loaded. So it should not be referenced directly in your onclick property. Especially since you have already attached an event listener for your a tags.

Next HTML id's should be unique, currently all your a tags have the same id. For multiple elements a class should be used.

<li><a class="some-class"  title="toobin">October<br>Jeffrey Toobin</a></li>

I would use a more specific selector. Maybe add a class to you links. And then:

$(document).ready(function () {

    //on click for <a> element

    $(".aClass").click(function () {

        var title = $(this).attr("title");

        getJSON(title+".json");

    });



});

I am assuming you have a number of JSON files you are pulling with each title as a file name?

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243597%2fjavascript-code-for-loading-data-json-files%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

$(document).ready(function () {

    //on click for <a> element

    $("a").click(function () {

        var title = $(this).attr("title");        

        getJSON(title+".json");

    });



}); // end ready

function getJSON(jsonFileURL) {

    alert(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&rsquo;s Speakers</h1>

       <nav id="nav_list">

           <ul>

               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>

               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>

               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>

               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>

           </ul>

       </nav>

   </aside>

   <footer>

       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

Thank you! I am still not getting any new text when I select the tabs, however. Is the id="speakers" not correct? Is it supposed to be id="toobin.json" (for example)?
– Samantha Hayes
Nov 10 at 21:48

You are making a Ajax request to a file with the url, and there is no file
– João Pimentel Ferreira
Nov 10 at 22:27

add a comment |

up vote
0
down vote

$(document).ready(function () {

    //on click for <a> element

    $("a").click(function () {

        var title = $(this).attr("title");        

        getJSON(title+".json");

    });



}); // end ready

function getJSON(jsonFileURL) {

    alert(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&rsquo;s Speakers</h1>

       <nav id="nav_list">

           <ul>

               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>

               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>

               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>

               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>

           </ul>

       </nav>

   </aside>

   <footer>

       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

Thank you! I am still not getting any new text when I select the tabs, however. Is the id="speakers" not correct? Is it supposed to be id="toobin.json" (for example)?
– Samantha Hayes
Nov 10 at 21:48

You are making a Ajax request to a file with the url, and there is no file
– João Pimentel Ferreira
Nov 10 at 22:27

add a comment |

up vote
0
down vote

$(document).ready(function () {

    //on click for <a> element

    $("a").click(function () {

        var title = $(this).attr("title");        

        getJSON(title+".json");

    });



}); // end ready

function getJSON(jsonFileURL) {

    alert(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&rsquo;s Speakers</h1>

       <nav id="nav_list">

           <ul>

               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>

               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>

               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>

               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>

           </ul>

       </nav>

   </aside>

   <footer>

       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

$(document).ready(function () {

    //on click for <a> element

    $("a").click(function () {

        var title = $(this).attr("title");        

        getJSON(title+".json");

    });



}); // end ready

function getJSON(jsonFileURL) {

    alert(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&rsquo;s Speakers</h1>

       <nav id="nav_list">

           <ul>

               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>

               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>

               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>

               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>

           </ul>

       </nav>

   </aside>

   <footer>

       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

$(document).ready(function () {

    //on click for <a> element

    $("a").click(function () {

        var title = $(this).attr("title");        

        getJSON(title+".json");

    });



}); // end ready

function getJSON(jsonFileURL) {

    alert(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&rsquo;s Speakers</h1>

       <nav id="nav_list">

           <ul>

               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>

               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>

               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>

               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>

           </ul>

       </nav>

   </aside>

   <footer>

       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

$(document).ready(function () {

    //on click for <a> element

    $("a").click(function () {

        var title = $(this).attr("title");        

        getJSON(title+".json");

    });



}); // end ready

function getJSON(jsonFileURL) {

    alert(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&rsquo;s Speakers</h1>

       <nav id="nav_list">

           <ul>

               <li><a id="speakers" title="toobin">October<br>Jeffrey Toobin</a></li>

               <li><a id="speakers" title="sorkin">November<br>Andrew Ross Sorkin</a></li>

               <li><a id="speakers" title="chua">January<br>Amy Chua</a></li>

               <li><a id="speakers" title="sampson">February<br>Scott Sampson</a></li>

           </ul>

       </nav>

   </aside>

   <footer>

       <p>&copy; 2017, San Joaquin Valley Town Hall, Fresno, CA 93755</p>

   </footer>

</body>

</html>

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

answered Nov 10 at 21:38

João Pimentel Ferreira

3,63912126

Thank you! I am still not getting any new text when I select the tabs, however. Is the id="speakers" not correct? Is it supposed to be id="toobin.json" (for example)?
– Samantha Hayes
Nov 10 at 21:48

You are making a Ajax request to a file with the url, and there is no file
– João Pimentel Ferreira
Nov 10 at 22:27

add a comment |

Thank you! I am still not getting any new text when I select the tabs, however. Is the id="speakers" not correct? Is it supposed to be id="toobin.json" (for example)?
– Samantha Hayes
Nov 10 at 21:48

You are making a Ajax request to a file with the url, and there is no file
– João Pimentel Ferreira
Nov 10 at 22:27

Thank you! I am still not getting any new text when I select the tabs, however. Is the id="speakers" not correct? Is it supposed to be id="toobin.json" (for example)?
– Samantha Hayes
Nov 10 at 21:48

You are making a Ajax request to a file with the url, and there is no file
– João Pimentel Ferreira
Nov 10 at 22:27

add a comment |

up vote
0
down vote

Next HTML id's should be unique, currently all your a tags have the same id. For multiple elements a class should be used.

<li><a class="some-class"  title="toobin">October<br>Jeffrey Toobin</a></li>

I would use a more specific selector. Maybe add a class to you links. And then:

$(document).ready(function () {

    //on click for <a> element

    $(".aClass").click(function () {

        var title = $(this).attr("title");

        getJSON(title+".json");

    });



});

I am assuming you have a number of JSON files you are pulling with each title as a file name?

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

add a comment |

up vote
0
down vote

Next HTML id's should be unique, currently all your a tags have the same id. For multiple elements a class should be used.

<li><a class="some-class"  title="toobin">October<br>Jeffrey Toobin</a></li>

I would use a more specific selector. Maybe add a class to you links. And then:

$(document).ready(function () {

    //on click for <a> element

    $(".aClass").click(function () {

        var title = $(this).attr("title");

        getJSON(title+".json");

    });



});

I am assuming you have a number of JSON files you are pulling with each title as a file name?

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

add a comment |

up vote
0
down vote

Next HTML id's should be unique, currently all your a tags have the same id. For multiple elements a class should be used.

<li><a class="some-class"  title="toobin">October<br>Jeffrey Toobin</a></li>

I would use a more specific selector. Maybe add a class to you links. And then:

$(document).ready(function () {

    //on click for <a> element

    $(".aClass").click(function () {

        var title = $(this).attr("title");

        getJSON(title+".json");

    });



});

I am assuming you have a number of JSON files you are pulling with each title as a file name?

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

Next HTML id's should be unique, currently all your a tags have the same id. For multiple elements a class should be used.

<li><a class="some-class"  title="toobin">October<br>Jeffrey Toobin</a></li>

I would use a more specific selector. Maybe add a class to you links. And then:

$(document).ready(function () {

    //on click for <a> element

    $(".aClass").click(function () {

        var title = $(this).attr("title");

        getJSON(title+".json");

    });



});

I am assuming you have a number of JSON files you are pulling with each title as a file name?

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

answered Nov 10 at 21:50

Vladimir Mujakovic

130111

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky