table.data changing after on(click) action
table.data changing after on(click) action
Hello,
My aim is to extract data from a row with a button and display it in a new modal.
When I click on the row to extract the modal, the opening of the modal is working well but I noticed that the struct of table.data has changed. When I close the modal where the data were extracted and I want to extract any data clicking on any button at the end of each row, I have this mistake: TypeError: e[0].aoData[this[0]] is undefined.
console.log(table.data()) before the click:
…}
"$": function s()
ajax: Object { __dt_wrapper: true, json: s(), params: s(), … }
cell: function s()
cells: function s()
clear: function s()
column: function s()
columns: function s()
context: Array [ {…} ]
data: function s()
destroy: function s()
draw: function s()
i18n: function s()
init: function s()
length: 0
....
console.log(table.data()) after the click:
"$": function s()
0: Array [ "2018-03-28 14:18:22+02:00", "test@test.com", "Test", … ]
1: Array [ "2018-01-11 10:17:09", "tes2@test.ch", "test", … ]
2: Array [ "0001-01-01 00:00:00", "N/A", "test", … ]
3: Array [ "0001-01-01 00:00:00", "N/A", "test", … ]
4: Array [ "2018-03-02 15:58:31", "N/A", "test", … ]
5: Array [ "2018-03-26 13:20:21", "N/A", "26_03_2018 Test", … ]
6: Array [ "2018-03-26 13:45:45", "N/A", "26_03_2018 Test2", … ]
7: Array [ "2018-03-28 13:15:55+02:00", "N/A", "28_03_18 Test", … ]
ajax: Object { __dt_wrapper: true, json: s(), params: s(), … }
cell: function s()
cells: function s()
clear: function s()
column: function s()
columns: function s()
context: Array [ {…} ]
data: function s()
destroy: function s()
draw: function s()
i18n: function s()
init: function s()
length: 8
Source Code:
function email() {
var table = $('#emailTable').DataTable();
api.campaignId.get(campaign.id)
.success(function (data) {
$('#inbox').modal('show')
api.email_inbox ({
host: data.smtp.host,
username: data.smtp.username,
password: data.smtp.password
})
.success(function (data) {
JSON.stringify(data)
for (i = 0; i < data.length; i++) {
date = refactor_date(data[i].Date)
from = forge_from(data[i].From)
table.row.add([ date, from, data[i].Subject, data[i].Text]).draw();
}
table.columns(3).visible(false);
})
.error(function (data) {
modalError(data.responseJSON.message)
})
})
.error(function (data) {
$('#inbox').modal('show')
modalError(data.responseJSON.message)
})
}
function forge_from(from_obj) {
if (from_obj != null) {
from = from_obj[0].Address
return from
} else { return "N/A" }
}
function refactor_date(date) {
date = date.replace("T", " ")
date = date.replace("Z", "")
return date
}
$(document).ready(function() {
//var open_button = '<span style="cursor:pointer;"><i class="fa fa-envelope-open-o"></i></span>'
var open_button = '<button>Click!</button>'
var table = $('#emailTable').DataTable({
"columnDefs": [ {
"targets":-1,
"data": null,
"defaultContent": open_button
}]
});
table.columns.adjust().draw();
var row_data = ""
// Handle View of content of email.
//$("#emailTable").on("click", "span>i.fa-envelope-open-o", function () {
console.log(table.data())
$("#emailTable").on("click", "button", function () {
console.log(table.data())
row_data = table.row($(this).parents('tr')).data();
$('#emaildisplay').modal('show');
document.getElementById('email_title').innerHTML = row_data[2];
document.getElementById('email_content').innerHTML = row_data[4];
});
// Clear the inbox when leaving the modal.
$('#inbox').on('hidden.bs.modal', function(){
$("#emailTable").DataTable().clear();
});
// Close emaildisplay modal instead of closing all modals.
$('.emaildisplayclose').click(function(){
$('#emaildisplay').modal('hide');
});
});
Thanks for the help!
Cycl0pe
Replies
This issue has been resolved. I just forgot to close a
<
div> in my html file.
Cycl0pe