Search jQuery

jQuery Forum

Making a Json Call

in Using jQuery • 6 years ago

I have a click function that works for one of my anchor tags but I want it to work for two (or more). When I click on the anchor with id get-data-1 it displays the json file microLesson1.json for the div with class quiz-list-1. I want it to display the json file microLesson2.json when I click on the anchor with id get-data-2 as well.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
table.my-new-list {
width: 20%;
}
</style>
</head>
<body>
<a href="#" id="get-data-1">MicroLesson 1</a><br />
<a href="#" id="get-data-2">MicroLesson 2</a>
<div class="quiz-list-1"></div>
<div class="quiz-list-2"></div>
<script>
$(document).ready(function() {
$('#get-data-1').click(function () {
$.getJSON( "ajax/microLesson1.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<tr><td>" + key + "</td><td>" + val + "</td></tr>" );
});
$( "<table />", {
"class": "my-new-list",
html: items.join( "" ),
}).appendTo( ".quiz-list-1" );
});
});
});
</script>
</body>
</html>

microLesson1.json

{
"Quiz 1": "80%",
"Quiz 2": "100%",
"Quiz 3": "90%"
}

microLesson2.json

{
"Quiz 1": "70%",
"Quiz 2": "50%",
"Quiz 3": "90%",
"Quiz 3": "80%",
"Quiz 3": "60%"
}

Replies(2)

kbwood.au

Re: Making a Json Call

6 years ago

You could replicate your code for the second link. Or you could create a common function that performed the steps and tell it what file and element to work with for each click. Or you could add attributes to the links to identify the file and target element and use those in a common click handler.

makamo66

Re: Making a Json Call

6 years ago

Thank you kbwood.au

Top Reply

Response title

Attachments

jQuery Forum

Making a Json Call

Replies(2)

Re: Making a Json Call

Re: Making a Json Call

Statistics

Tags

Actions