Here I have google visualisation DataTable:
So i have this code:
function drawTroskovnik() {
// Create and populate the data table.
var JSONObject = $.ajax({
url: 'getTroskovnik.php', // make this url point to the data file
dataType: 'json',
data:{id_akt:ajdi},
async: false,
type: 'POST',
}).responseText;
var data = new google.visualization.DataTable(JSONObject, 0.5);
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
for (var x = 1, maxcols = data.getNumberOfColumns(); x < maxcols; x++) {
data.setValue(y, x, '<input id="costRedovi" class="form-control" value="'+data.getValue(y,x)+'">');
}
}
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
data.setValue(y, 0, '<input class="span2 form-control" id="pocetak1" size="16" type="text" value="'+data.getValue(y,0)+'" readonly>');
}
data.addColumn('string', 'Kontrole');
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
var mc= data.getNumberOfColumns()-1;
data.setValue(y, mc, '<a data-toggle="modal" data-target="#update" href="#" class="btn btn-success"><i class="fa fa-pencil"></i> Details</a>');
}
new google.visualization.events.addListener(table, 'ready', function () {
google.visualization.events.addListener(table.getChart(), 'select', function () {
var selection = table.getChart().getSelection();
//HOW TO GET LABEL of COLUMN an DATE from row so to use it in ajax submit
$( "#costRedovi" ).focusout(function() {
$.ajax({
url: "update.php",
type: "POST",
async: true,
data: { columnName:HOW_to_get_column_name,datum:How_to_get_date_from_row_where_is_selected_cell?},
dataType: "html",
success: function(data) {
console.log(data);
},
});
})
}
});
});
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('tpltroskovnik'));
visualization.draw(data, {'allowHtml': true, cssClassNames: 'nn' }});
}
What I need to do?
Now I have each cell value into input field, so I can change it. I want on .focusout
to run .ajax
function to update
data in database, but to do this I need to get Column Label Name and date
(as you can see on photo - date is a '0' position in row...)
How I can get Column Label Name and date for cell which is on focusout ?
It was very easy to solve this problem, so I get columnLabel on new better way:
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
for (var x = 1, maxcols = data.getNumberOfColumns(); x < maxcols; x++) {
data.setValue(y, x, '<input id="costRedovi" kol="'+ data.getColumnLabel(x) +'" class="form-control" value="'+data.getValue(y,x)+'">');
}
}
so the solution was: data.getColumnLabel(x), now every input has attribute kol
and now is easy to run ajax code when datatable is ready.