I am trying to edit a datatable row using editors Edit form. But I get the following alert after I click on save button: [below alert is caused while editing row 6]
DataTables warning (table id='hierlvl3list'): Requested unknown parameter 'lvlTitle' from the data source for row 5
After I click the Ok button in alert the row disappear. Interesting fact is that after I reload the page the changes are updated. Therefore I believe that there is some parameter which is missing after returning from edit screen.
I tried the datatables debugger, which I launched from my bookmark. But the debugger seems to be get stuck. It throws an error in the firebug console: HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy. The error is in line 13 of DT_Debug.js
Please let me know should you require further input to debug this.
Below is the html code:
DataTables warning (table id='hierlvl3list'): Requested unknown parameter 'lvlTitle' from the data source for row 5
After I click the Ok button in alert the row disappear. Interesting fact is that after I reload the page the changes are updated. Therefore I believe that there is some parameter which is missing after returning from edit screen.
I tried the datatables debugger, which I launched from my bookmark. But the debugger seems to be get stuck. It throws an error in the firebug console: HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy. The error is in line 13 of DT_Debug.js
Please let me know should you require further input to debug this.
Below is the html code:
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%@ page language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache,no-store" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style class="include" type="text/css">
@import "/js/jquery/ui/css/smoothness/jquery-ui.custom.css";
@import "/js/jquery/datatables/media/css/jquery.dataTables_themeroller.css";
@import "/js/jquery/datatables/extras/TableTools/media/css/TableTools_JUI.css";
@import "/js/jquery/datatables/extras/Editor/media/css/dataTables.editor.css";
div.clear {
clear: both;
}
div.DTTT_container {
float: right;
margin-bottom: 1em;
position: relative;
}
div.DTE_Footer_Content {
position: relative;
}
div.DTE_Form_Buttons {
float: right;
}
div.DTE_Form_Buttons button {
float: left;
margin: 0;
}
div.DTE_Form_Buttons button.save {
border-radius: 0;
border-width: 1px 0;
}
div.DTE_Form_Buttons button.save_previous {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
color: #444;
}
div.DTE_Form_Buttons button.save_next {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
color: #444;
}
</style>
<script type="text/javascript" src="/js/jquery/datatables/media/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/ui/js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="/js/jquery/datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/jquery/datatables/extras/TableTools/media/js/TableTools.js"></script>
<script type="text/javascript" src="/js/jquery/datatables/extras/Editor/media/js/dataTables.editor.js"></script>
<script type="text/javascript" charset="utf-8" id="init-code">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "/admin/hierarchy/hier_lvl3_list.html?orgid=${param.orgid}",
"domTable": "#hierlvl3list",
"fields": [ {
"label": "Title:",
"name": "lvlTitle"
},{
"label": "Parent:",
"name": "pt.id",
"type": "select"
}
]
} );
var table = $('#hierlvl3list').dataTable( {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"T<"clear">lfr>t<"F"ip>',
"sAjaxSource": "/admin/hierarchy/hier_lvl3_list.html?orgid=${param.orgid}",
"aoColumns": [
{ "mData": "lvlTitle" },
{ "mData": "pt.title" }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
"select_all", "select_none",
{ "sExtends": "editor_create", "editor": editor },
{
"sExtends": "editor_edit",
"sButtonClass": "editor_edit",
"editor": editor,
"formButtons": [
{
"label": "<",
"className": "save_previous",
"fn": function (e) {
this.submit( function () {
var tt = window.TableTools.fnGetInstance('hierlvl3list');
var row = tt.fnGetSelected()[0];
var index = table.$('tr').index(row);
tt.fnDeselect( row );
tt.fnSelect( table.$('tr')[index-1] );
$('a.editor_edit').click();
}, null, null, false );
}
},
{
"label": "Save",
"className": "save",
"fn": function (e) {
this.submit();
}
},
{
"label": ">",
"className": "save_next",
"fn": function (e) {
this.submit( function () {
var tt = window.TableTools.fnGetInstance('hierlvl3list');
var row = tt.fnGetSelected()[0];
var index = table.$('tr').index(row);
tt.fnDeselect( row );
tt.fnSelect( table.$('tr')[index+1] );
$('a.editor_edit').click();
}, null, null, false );
}
}
]
},
{ "sExtends": "editor_remove", "editor": editor }
]
},
"fnInitComplete": function ( settings, json ) {
editor.field('pt.id').update( json.pt );
}
} );
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="hierlvl3list" width="100%">
<thead>
<tr>
<th width="60%" align="left">Title</th>
<th width="40%" align="left">Parent</th>
</tr>
</thead>
</table>
</body>
</html>
JSON for building the datatable:
{"id":-1,"error":"","fieldErrors":[],"data":[],"aaData":[{"DT_RowId":"10009777","lvlTitle":"AA edited","pt":{"id":"103085","title":"sub 2"}},{"DT_RowId":"10009779","lvlTitle":"AAA","pt":{"id":"0","title":""}},{"DT_RowId":"10009767","lvlTitle":"dept 11","pt":{"id":"0","title":""}},{"DT_RowId":"10009768","lvlTitle":"dept 2","pt":{"id":"0","title":""}},{"DT_RowId":"10009769","lvlTitle":"dept 3","pt":{"id":"0","title":""}},{"DT_RowId":"10009770","lvlTitle":"dept 4","pt":{"id":"103085","title":"sub 2"}},{"DT_RowId":"10009771","lvlTitle":"dept 5","pt":{"id":"0","title":""}},{"DT_RowId":"10009772","lvlTitle":"dept 6","pt":{"id":"0","title":""}},{"DT_RowId":"10009773","lvlTitle":"dept 7","pt":{"id":"103084","title":"sub 11"}},{"DT_RowId":"10009774","lvlTitle":"dept 8","pt":{"id":"0","title":""}},{"DT_RowId":"10009775","lvlTitle":"dept 9","pt":{"id":"103084","title":"sub 11"}},{"DT_RowId":"10009776","lvlTitle":"dept10","pt":{"id":"103084","title":"sub 11"}},{"DT_RowId":"10009780","lvlTitle":"region 1","pt":{"id":"0","title":""}},{"DT_RowId":"10009781","lvlTitle":"region 2","pt":{"id":"103085","title":"sub 2"}}], "pt":[{"value":"0","label":"\u003cselect\u003e"},{"value":"103084","label":"sub 11"},{"value":"103085","label":"sub 2"}]}
JSON returned when row 6 is saved
{"id":"10009770","error":"","fieldErrors":[],"data":[],"row":[{"DT_RowId":"10009770","lvlTitle":"dept 4","pt":{"id":"103085","title":"sub 2"}}]}