Hi,

I have a button which makes an ajax call and gets json data. On success, this data is displayed on an igGrid. Below is the snippet.

Problem: The first time I click the button, no data is displayed. The second time I click it,. the igGrid shows data. Please help.

Below is the code snippet:

$("#button").on('igbuttonclick',
function (e) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8;",
url: "/Home/GetJSON",
dataType: 'json',
success: function (data) {
var json = JSON.parse(data);
//var dataa = [
//{ "Name": "Mark", "Age": 25 },
// { "Name": "Bill", "Age": 59 },
// { "Name": "Tim", "Age": 54 },
// ];

//The JSON has multiple tables. I create an igGrid for each table
Object.keys(json).forEach(function (key) {
var tbl = document.createElement("table");
tbl.setAttribute("id",key)
$("#" + key).igGrid({
id:"ig"+key,
dataSource:dataa
});
//Have a div called "resultsView" on the view
$("#resultsView").append(tbl);
});
},
error: function (a, b, c) {
alert('Failed');
}
});
});