Print Page - Impossible to edit grid after using datagrid reload function

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>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: ltpitt on April 19, 2014, 07:56:59 AM