How to implement OnClick event to call $.getJSON Function
Question
I'm working with an Json Data to populate the Html table with it. The code works fine when I exclude
function getAllDepts()
{
but I would like to insert an button so that it would populate the html table with new JSON Data is availaible and refresh the Table.
But, I nothing is working for me.
Any Suggestions??
My Html code is
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="table-responsive"> <h1>Json</h1> <br/> <table class="table table-bordered table-striped" id="employee_table"> <tr> <th>Class</th> <th>Time</th> </tr> </table> </div> </div> <input id="getAllDepts" type="button" value="Create Table From JSON" /> </body> </html> <script> $(document).ready(function(){ var employee_data= ''; if(localStorage.myJSON !== undefined){ var myJSON = JSON.parse(localStorage.myJSON); employee_data += '<tbody>'; $.each(myJSON, function(key, value){ employee_data += '<tr>'; employee_data += '<td>'+value.class+'</td>'; employee_data += '<td>'+value.time+'</td>'; employee_data += '</tr>'; }); employee_data += '</tbody>'; $('#employee_table').append(employee_data); } employee_data= ''; // empty employee_data $('#getAllDepts').click(function() { $.getJSON("https://api.myjson.com/bins/8qktd", function(data){ $("#yourtableid tbody").remove(); // Empty table before filling it with new data localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage $.each(data, function(key, value){ employee_data += '<tr>'; employee_data += '<td>'+value.class+'</td>'; employee_data += '<td>'+value.time+'</td>'; employee_data += '</tr>'; }); $('#employee_table').append(employee_data); }); }) </script>
and another Problem I'm facing is while it is offline ,[ ( of course when I remove function getAllDepts() { ) from there, it runs fine ], On that occasion it populates the table with json data only when Online and when offline it don't work anymore and only column header is shown.
My json Data is
[ { "id":"1", "time":"10-15", "class":"John Smith" }, { "id":"2", "time":"10-15", "class":"John Smith" }, { "id":"3", "time":"10-15", "class":"John Smith" }, { "id":"4", "time":"10-15", "class":"John Smith" }, { "id":"5", "time":"10-15", "class":"John Smith" }, { "id":"6", "time":"10-15", "class":"John Smith" }, { "id":"7", "time":"10-15", "class":"John Smith" }, { "id":"8", "time":"10-15", "class":"John Smith" }, { "id":"9", "time":"10-15", "class":"John Smith" }, { "id":"10", "time":"10-15", "class":"John Smith" }, { "id":"11", "time":"10-15", "class":"John Smith" }, { "id":"12", "time":"10-15", "class":"John Smith" } ]
1 answers
solution1
1 ACCPTED 2017-10-14 14:19:54
You could do something like this:
Wrap your getJSON function with a click listener. Here is your rewritten script tag:
<script>
$(document).ready(function() {
var employee_data= '';
if(localStorage.myJSON !== undefined){
var myJSON = JSON.parse(localStorage.myJSON);
employee_data += '<tbody>';
$.each(myJSON, function(key, value){
employee_data += '<tr>';
employee_data += '<td>'+value.class+'</td>';
employee_data += '<td>'+value.time+'</td>';
employee_data += '</tr>';
});
employee_data += '</tbody>';
$('#employee_table').append(employee_data);
}
employee_data= ''; // empty employee_data
$('#getAllDepts').click(function() {
$.getJSON("https://api.myjson.com/bins/8qktd", function(data){
$("#yourtableid tbody").remove(); // Empty table before filling it with new data
localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
$.each(data, function(key, value){
employee_data += '<tr>';
employee_data += '<td>'+value.class+'</td>';
employee_data += '<td>'+value.time+'</td>';
employee_data += '</tr>';
});
$('#employee_table').append(employee_data);
});
})
});
</script>
Just add an id to your input element in the HTML element like so:
<input id="getAllDepts" type="button" value="Create Table From JSON" />
Your function is not returning any data when you are offline, because you are making an AJAX request to an URL that is hosted on the internet. Try creating a mock JSON file on your local computer to work with instead if you want to use it offline.
An easy way to test offline would be to just create your own json file, with whatever data you want. For example: you could create a file called test.json and filled it with your own valid JSON data.
Just change your ajax request to point to the local file, instead of the url on the internet. You could swap these out whenever you wanted. Quick example:
$.getJSON("data.json", function(data){
Not sure what your directory structure looks like, but you might have to mess around with the path to the json file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.