3
Ajax를 통해 Datatable을 다시로드 할 때 "Uncaught TypeError : null의 속성 'aoData'을 읽을 수 없습니다. 기본적으로 하나의 주 데이터 테이블 (table_1)이 각 행에 다른 데이터 테이블을 포함하는 모달 팝업을 포함하는 링크가 있습니다. (나는 그들이 모두 고유 남아 있는지 확인 모달 내부 테이블 모두에 대해 특정 클래스 및 ID의를 채우기 위해 PHP를 사용합니다.) 여기에 내가 무슨 말을 설명하는 코드이다 : 위치 datatables에 대한데이터 테이블을 포함하여 ajax 호출 후에 null의 'aoData'속성을 읽을 수 없습니다.
<table id="table_1">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-toggle="modal" href="#<?=$row3->ID?>">link to open modal</a>
<div class="modal fade" id="<?=$row3->ID?>" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">My modal that houses a new table inside</h4>
</div>
<div class="modal-body">
<table id="new_<?=$row3->ID?>">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td align="center"><a class="edithours_<?=$row3->ID?>" href="javascript:;">Edit</a></td>
<td align="center"><a class="deletehours_<?=$row3->ID?>" href="javascript:;">Delete</a></td>
</tr>
</tbody>
</table>
<div class="table-toolbar">
<div class="btn-group pull-right">
<button id="new_<?=$row3->ID?>" class="btn green"> <i class="icon-plus"></i> Add </button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div></td>
</tr>
</tbody>
</table>
행 모달 안에는 아약스를 통해 추가, 삭제, 편집이 가능합니다. 전체 내용을 완전히 새로 고침하는 아약스 호출을 실행할 때까지 모든 것이 잘 작동합니다. Ajax 호출은 성공적이며 모든 데이터가 올바르게로드되지만 어떤 이유로 재로드 한 후에 모달 안에있는 데이터 테이블의 행을 편집, 삭제 또는 저장하려고하면 콘솔 로그에 위에서 언급 한 오류가 발생합니다. 주 테이블은 여전히 정상적으로 작동하고 모든 모달이 올바르게 작동합니다. 나는 심지어 행을 추가 할 수 있습니다. 단지 편집, 삭제 또는 저장할 수 없습니다. 여기에 편집을 허용하는 함수에 포함 된 "두 번째 계층"데이터 테이블을 호출하는 함수가 있습니다. 그것은로드 할 때와 아약스를 다시로드 한 후에 호출됩니다. 내가 그것을 변경하면 내가 일을 삭제 기능을 얻을 수 있습니다, 어떤 이유로
function loadTables(id) {
var TableEditable = 'TableEditable_' + id;
window[TableEditable] = function() {
return {
//main function to initiate the module
init: function() {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
//oTable.fnClearTable(this);
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
if (aData[0] == '2') {
var sickHours = ' selected="selected"';
var vacHours = '';
} else if (aData[0] == '3') {
var sickHours = '';
var vacHours = ' selected="selected"';
} else {
var sickHours = '';
var vacHours = '';
}
if (aData[2] == '') {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy;
} else {
today = aData[2];
}
jqTds[0].innerHTML = '<select class="form-control input-small select2me"><option' + sickHours + ' value="2">Sick</option><option' + vacHours + ' value="3">Vacation</option></select></select>';
jqTds[1].innerHTML = '<input type="text" id="hours" class="form-control input-xsmall" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input class="form-control form-control-inline input-small2 date-picker" size="4" type="text" value="' + today + '" />';
jqTds[3].innerHTML = '<center><a class="edithours_' + id + '" href="">Save</a></center>';
jqTds[4].innerHTML = '<center><a class="cancelhours_' + id + '" href="">Cancel</a></center>';
FormComponents.init();
}
function editRow2(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
if (aData[0] == '2') {
var sickHours = ' selected="selected"';
var vacHours = '';
} else if (aData[0] == '3') {
var sickHours = '';
var vacHours = ' selected="selected"';
} else {
var sickHours = '';
var vacHours = '';
}
if (aData[2] == '') {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy;
} else {
today = aData[2];
}
jqTds[0].innerHTML = '<select class="form-control input-small select2me"><option' + sickHours + ' value="2">Sick</option><option' + vacHours + ' value="3">Vacation</option></select></select>';
jqTds[1].innerHTML = '<input type="text" id="hours" class="form-control input-xsmall" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input class="form-control form-control-inline input-small2 date-picker" size="4" type="text" value="' + today + '" />';
jqTds[3].innerHTML = '<center><a class="edithours_' + id + '" href="">Save</a></center>';
jqTds[4].innerHTML = '<center><a data-mode="new" class="cancelhours_' + id + '" href="">Cancel</a></center>';
FormComponents.init();
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
var jqSelect = $('select', nRow);
if (jqInputs[0].value == '' || jqInputs[1].value == '') {
alert('Please enter the required information.');
goSave = '0';
} else {
newNum4 = (Math.floor(jqInputs[0].value.replace(",", "") * 100)/100).formatMoney(2, '.', ',');
if (jqSelect[0].value == '2') {
typeHour = 'Sick';
} else if (jqSelect[0].value == '3') {
typeHour = 'Vacation';
} else {}
goSave = '1';
oTable.fnUpdate(typeHour, nRow, 0, false);
$('td', nRow)[0].setAttribute('id', 'type_' + jqSelect[0].value);
oTable.fnUpdate(newNum4, nRow, 1, false);
oTable.fnUpdate('<center>' + jqInputs[1].value + '</center>', nRow, 2, false);
oTable.fnUpdate('<center><a class="edithours_' + id + '" href="">Edit</a></center>', nRow, 3, false);
oTable.fnUpdate('<center><a class="deletehours_' + id + '" href="">Delete</a></center>', nRow, 4, false);
oTable.fnDraw();
}
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
var jqSelect = $('select', nRow);
newNum4 = (Math.floor(jqInputs[0].value.replace(",", "") * 100)/100).formatMoney(2, '.', ',');
if (jqSelect[0].value == '2') {
typeHour = 'Sick';
} else if (jqSelect[0].value == '3') {
typeHour = 'Vacation';
} else {}
goSave = '1';
oTable.fnUpdate(typeHour, nRow, 0, false);
$('td', nRow)[0].setAttribute('id', 'type_' + jqSelect[0].value);
oTable.fnUpdate(newNum4, nRow, 1, false);
oTable.fnUpdate('<center>' + jqInputs[1].value + '</center>', nRow, 2, false);
oTable.fnUpdate('<center><a class="edithours_' + id + '" href="">Edit</a></center>', nRow, 3, false);
oTable.fnUpdate('<center><a class="deletehours_' + id + '" href="">Delete</a></center>', nRow, 4, false);
oTable.fnDraw();
}
var oTable = $('#tech_hour_dist_' + id).dataTable({
"bServerSide": false,
"bDestroy": true,
"iDisplayLength": 10,
// "sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"sDom": "",
"sPaginationType": "bootstrap",
"oLanguage": {
"sEmptyTable": "No sick/vacation hours detected for this date range. Press the 'Add' button below to get started.",
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"bSort": false
});
jQuery('#tech_hour_dist_' + id + '_wrapper .dataTables_filter input').addClass("form-control input-medium"); // modify table search input
jQuery('#tech_hour_dist_' + id + '_wrapper .dataTables_length select').addClass("form-control input-small"); // modify table per page dropdown
jQuery('#tech_hour_dist_' + id + '_wrapper .dataTables_length select').select2({
showSearchInput: false //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
$('#tech_hour_dist_new_' + id).click(function(e) {
// $('#tech_hour_dist_new_'+id).live('click', function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '', '<center><a class="edithours_' + id + '" href="">Edit</a></center>', '<center><a class="cancelhours_' + id + '" data-mode="new" href="">Cancel</a></center>']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow2(oTable, nRow);
nEditing = nRow;
});
$(document).on('click', 'a.deletehours_' + id, function(e) {
e.preventDefault();
var $row = $(this).closest('tr');
var job_id = $row.attr('id');
var thejobID = 0;
if (confirm("Are you sure to delete this?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
$.ajax({
url: URL + 'index.php/process/delete_tech_hours',
type: 'POST',
data: {
job_id: job_id
},
dataType: "html",
success: function(data) {}
});
});
$(document).on('click', 'a.cancelhours_' + id, function(e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
$(document).on('click', 'a.edithours_' + id, function(e) {
e.preventDefault();
var $row = $(this).closest('tr');
var attr = $row.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
URLend = 'index.php/process/update_tech_hours';
job_id = $row.attr('id');
process = 0;
} else {
URLend = 'index.php/process/add_tech_hours';
job_id = '';
process = 1;
} /* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) { /* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") { /* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
if (goSave == '1') {
var tech = id;
var THEtype = $row.find('td:eq(0)').attr('id');
var type = THEtype.split("_");
var hours = $row.find('td:eq(1)').text();
var credit_date = $row.find('td:eq(2)').text();
var thejobID = 0;
$.ajax({
url: URL + URLend,
type: 'POST',
data: {
tech: tech,
type: type[1],
hours: hours,
credit_date: credit_date,
thejobID: thejobID,
job_id: job_id
},
dataType: "html",
success: function(data) {
if (process == 1) {
$row.attr("id", data);
}
FormComponents.init();
}
});
} else {
return;
}
} else { /* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
};
}();
window[TableEditable].init();
}
(함수에 전달되는 VAR ID를 참고 내가 나에게하는 데 사용할 수 내에서 올바른 테이블과 요소를 식별입니다) 그냥() 클릭 대신에() 클릭하십시오 ....하지만 다른 사람들은 그냥 페이지를 다시로드합니다. 나는 며칠 동안이 일을 겪어 왔고, 나는 지혜로 끝날 것입니다. . 좋은 아이디어 나 입력 내가 많이 주시면 감사하겠습니다 또한, 나는 남아있는 수 무언가가 밖으로 그래서 당신은 다른 코드를 볼 필요가 있다면 알려주세요 감사합니다
이
수령 한 아약스 데이터를 몇 줄 추가 할 수 있습니까? – mainguy
@mainguy받은 ajax 데이터는 table_1의 전체 재로드 일뿐입니다. –