Hello everyone...
I have an almost perfectly working datagrid.
The main problem now is that if I use the reload function (manually) or automatically.
The error I get, after reloading is this (in console):
Uncaught TypeError: Cannot read property 'target' of null
I would like to help you helping me (sorry: I am clearly a noob) so if any further detail is needed to get help please ask me anything
Here's the problematic page, I've added a comment where I think the error occurs:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the row to start editing.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Materiali in opera" style="width:1055px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
rownumbers:true,
pagination:true,
url: 'php/get_dati.php',
method: 'get',
onAfterEdit: onAfterEdit,
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'MaterialeConsegnato',width:176,
formatter:function(value,row){
return row.Nome_prodotto;
},
editor:{
type:'combobox',
options:{
valueField:'ID',
textField:'Nome_prodotto',
url:'php/get_dati_tabella_prodotti.php',
required:true
}
}">Materiali installato</th>
<th data-options="field:'CodicePresa',width:130,align:'center',editor:'text'">Codice presa</th>
<th data-options="field:'C_I',width:100,align:'center',editor:'text'">C/I</th>
<th data-options="field:'Quantita',align:'right',width:90,editor:'numberbox'">Quantità </th>
<th data-options="field:'CostoUnitario',width:100,align:'right'">Costo unitario</th>
<th data-options="field:'CostoTotale',width:100,align:'right'">Costo Totale</th>
<th data-options="field:'AggiornaInventario',width:100,align:'center',editor:{type:'checkbox',options:{on:'-1',off:'1'}}">Aggiorna inv.</th>
<th data-options="field:'Note',width:250">Note</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
<script type="text/javascript">
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'MaterialeConsegnato'});
var Nome_prodotto = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['Nome_prodotto'] = Nome_prodotto;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{status:'P'});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
function onAfterEdit(rowIndex, rowData, changes) {
if ( (changes.MaterialeConsegnato) || (changes.CodicePresa) || (changes.C_I) || (changes.Quantita) || (changes.AggiornaInventario)) {
console.log ("scrivi dentro idintervento il valore = " + rowData.IdIntervento);
console.log ("scrivi dentro idmaterialeutilizzato il valore = " + rowData.IDMaterialeUtilizzato);
console.log ("update MaterialiUtilizzati set MaterialeConsegnato='"+rowData.MaterialeConsegnato+"', CodicePresa='"+rowData.CodicePresa+"', C_I='"+rowData.C_I+"', Quantita='"+rowData.Quantita+"', CostoTotale='"+rowData.Quantita * rowData.CostoUnitario+"', AggiornaInventario='"+rowData.AggiornaInventario+"', Note='"+rowData.Note+"' where idintervento='"+rowData.IdIntervento+"' and IDMaterialeUtilizzato='"+rowData.IDMaterialeUtilizzato+"'");
testosql="update MaterialiUtilizzati set MaterialeConsegnato='"+rowData.MaterialeConsegnato+"', CodicePresa='"+rowData.CodicePresa+"', C_I='"+rowData.C_I+"', Quantita='"+rowData.Quantita+"', CostoTotale='"+rowData.Quantita * rowData.CostoUnitario+"', AggiornaInventario='"+rowData.AggiornaInventario+"', Note='"+rowData.Note+"' where idintervento='"+rowData.IdIntervento+"' and IDMaterialeUtilizzato='"+rowData.IDMaterialeUtilizzato+"'"
//$.post('php/save_riga_mat_in_opera.php',{sql:testosql},function(result){if (result.success){$('#dg').datagrid('reload');} else {$.messager.show({title: 'Error', msg: result.errorMsg});}},'json');
// IF I USE THE BELOW ROW THE CODE WORKS (BUT DOESN'T UPDATE) IF I USE THE ABOVE ROW VICE VERSA: IT UPDATES BUT THEN IT GIVES ERROR
$.post('php/save_riga_mat_in_opera.php',{sql:testosql},'json');
}
}
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons:[{
iconCls:'icon-search',
handler:function(){
alert('search');
}
},{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-save',
handler:function(){
alert('Salva riga');
}
},{
iconCls:'icon-edit',
handler:function(){
alert('edit');
}
}]
});
})
</script>
</body>
</html>
