3 Replies - 321 Views - Last Post: 10 November 2016 - 03:36 PM

#1 makamo66  Icon User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Making a Json Call

Posted 10 November 2016 - 02:42 PM

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>
<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%"
}


Is This A Good Question/Topic? 0
  • +

Replies To: Making a Json Call

#2 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,903
  • Joined: 12-December 12

Re: Making a Json Call

Posted 10 November 2016 - 02:48 PM

What have you attempted?
Was This Post Helpful? 0
  • +
  • -

#3 makamo66  Icon User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Re: Making a Json Call

Posted 10 November 2016 - 03:33 PM

$.getJSON( "ajax/microLesson2.json", function( dataB ) {
  var itemsB = [];
  $.each( dataB, function( keyB, valB ) {
    itemsB.push( "<tr><td>" + keyB + "</td><td>" + valB + "</td></tr>" );
  });
 
  $( "<table />", {
    "class": "my-new-list",
    html: itemsB.join( "" )
 }).appendTo( ".quiz-list-2" );
});
});

Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1840
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Making a Json Call

Posted 10 November 2016 - 03:36 PM

Instead of hard-coding that stuff into the function, you should give both elements a class and store that kind of data in a data attribute.

<a href="#" class="get-data" data-json="ajax/microLesson1.json">MicroLesson 1</a>


Inside the click handler you can get the element that was clicked on and get that value from the data attribute, and use that to send the ajax request. You'll need to add other data attributes for whatever things change depending on what they click on, like which element to append the new content to.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1