Question

Part 1: Modify code 1. In the.js file, write the JavaScript code for this application. Within the click event handlers for the elements in the sidebar, use the title attribute for each link to build the name of the JSON file that needs to be retrieved. Then, use that name to get the data for the speaker, enclose that data in HTML elements that are just like the ones that are used in the starting HTML for the first speaker, and put those elements in the main element in the HTML. That way, the CSS will work the same for the Ajax data as it did for the starting HTML. 2. Don’t forget to clear the elements from the main element before you put the new Ajax data in that element. 3. Verify there are no errors.

Answer 1

Answer:

Note: Provided Pham-Activity13.js file only. I did not modifying remaining JSON, HTML and CSS files. You have to put all your JSON, HTML and CSS files in the same folder/directory.

Screenshot of the Java script:  

Pham-Activity13.js: is attached

Explanation:

Code to copy:

Pham-Activity13.js:

$(document).ready(function () {

//on click for <a> element

$("#nav_list li").click(function() {

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

      var filename = title+".json";

consumeJSON(filename);

});

}); // end ready

function consumeJSON(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 + "
" + 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);

}

});

}