I have a form, which does not work the edit button, this instead of doing the edition of the record, add a row to the table, I have printed it by console and it is undefined, this is in the Save function () of the JS, this always goes by the else: c
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="js/grid.js" type="text/javascript"></script>
<link href="css/grid.css" rel="stylesheet" type="text/css">
<script src="js/dialog.js" type="text/javascript"></script>
<link href="css/dialog.css" rel="stylesheet" type="text/css">
<script src="js/draggable.js" type="text/javascript"></script>
<script type="text/javascript" src="js/valida.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/estilo.css" media="screen" />
</head>
<body>
<table border="1">
<tr>
<td>
<table border="0">
<tr>
<td>Departamento originador:</td>
<td><input type="text" name="nomDepOri"></td>
<td></td>
<td>APE N°</td>
<td><input type="text" name="apeN"></td>
</tr>
<tr>
<td>Centro de beneficio:</td>
<td><input type="text" name="centBene"></td>
<td></td>
<td>Fecha de emisión</td>
<td width="80"><input type="date" id="fchFecha" readonly="readonly" /></td>
</tr>
</table>
<hr>
</td>
</tr>
<tr>
<td>Sívase coordinar el retiro del siguiente material dado de baja</td>
</tr>
<tr>
<td><button id="btnAdd" type="button" class="btn btn-default">Agregar</button></td>
</tr>
<tr>
<td>
<table id="grid"></table>
</td>
</tr>
<tr>
<td>
<table id="button">
<tr>
<td><button>Guardar</button></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="dialog" style="display:none">
<input type="hidden" id="ID">
<form name="formApe">
<table border="0" class="tablePopup">
<tr>
<td width="80">Cantidad</td>
<td width="160">Unidad de Medida</td>
<td>Condición</td>
<td>Activo Fijo</td>
</tr>
<tr>
<td><input type="text" id ="Cantidad" name="Cantidad" class="solo-numero" maxlength="2" required></td>
<td>
<select id ="unidadMedida" required><option value="" >Seleccione...</option>
<option value="Litros">Litros</option>
<option value="Kilos">Kilos</option>
<option value="Bulto">Bulto</option>
<option value="Lote">Lote</option>
<option value="Equipo">Equipo</option>
<option value="Piezas">Piezas</option>
<option value="Unidad">Unidad</option>
</td>
<td>
<select id ="condicion" required><option value="">Seleccione...</option>
<option value="Bueno">Bueno</option>
<option value="Malo">Malo</option>
<option value="Regular">Regular</option>
</td>
<td>
<input type="radio" name="activoFijo" value="Si" >Si
<input type="radio" name="activoFijo" value="No" >No
</td>
</tr>
<tr>
<td>Descripción</td>
</tr>
<tr>
<td scope="colgroup" colspan="4"><textarea cols="65" maxlength="1500" id="descripcion">ewdd</textarea></td>
</tr>
</table>
<table border="0" class="tablaButton">
<tr>
<td></td>
<td></td>
<td><button type="button" id="btnSave" class="btn btn-default">Save</button></td>
<td width="80"><button type="button" id="btnCancel" class="btn btn-default">Cancel</button></td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
</body>
</html>
js
$(document).ready(function () {
var data, grid, dialog;
data = [];
dialog = $('#dialog').dialog({
title: 'Agregar/Editar',
autoOpen: false,
resizable: false,
height:250,
width:600,
modal: true
});
function Edit(e) {
$('#Item').val(e.data.id);
$('#Cantidad').val(e.data.record.Cantidad);
$('#unidadMedida').val(e.data.record.unidadMedida);
$('#descripcion').val(e.data.record.descripcion);
$('#condicion').val(e.data.record.condicion);
$('#activoFijo').val(e.data.record.activoFijo);
$('#dialog').dialog('open');
$('#button').show();
}
function Delete(e) {
if (confirm('¿esta seguro que desea eliminar este registro?')) {
grid.removeRow(e.data.id);
if(grid.count()!=0){
$('#button').show();
}else{
$('#button').hide();
}
}
}
function Save() {
var item=$('#Item').val();
console.log(item);
if (item) {
console.log("entro a if");
var id = parseInt($('#Item').val());
grid.updateRow(id, { 'Item': id, 'Cantidad': $('#Cantidad').val(), 'unidadMedida': $('#unidadMedida').val(), 'descripcion' : $('#descripcion').val(), 'condicion' : $('#condicion').val(), 'activoFijo' : $('input[name="activoFijo"]:checked').val() });
} else {
console.log("entro a else");
grid.addRow({ 'Item': grid.count() + 1, 'Cantidad': $('#Cantidad').val(), 'unidadMedida': $('#unidadMedida').val(), 'descripcion' : $('#descripcion').val(), 'condicion' : $('#condicion').val(), 'activoFijo' : $('input[name="activoFijo"]:checked').val()});
}
dialog.close();
$('#button').show();
}
grid = $('#grid').grid({
dataSource: data,
columns: [
{ field: 'Item', width: 32 },
{ field: 'Cantidad' },
{ field: 'unidadMedida', title: 'Unidad de Medida' },
{ field: 'descripcion', title: 'Descripcion' },
{ field: 'condicion', title: 'Condicion'},
{ field: 'activoFijo', title: 'Activo Fijo (si-no)'},
{ width: 50, tmpl: '<a href="#"><img src="img/editar.png"></a>', align: 'center', events: { 'click': Edit } },
{ width: 50, tmpl: '<a href="#"><img src="img/eliminar.png"></a>', align: 'center', events: { 'click': Delete } }
]
});
$('#btnAdd').on('click', function () {
$('#Item').val('');
$('#Cantidad').val('');
$('#unidadMedida').val('');
$('#descripcion').val('');
$('#condicion').val('');
$('#activoFijo').val('');
$('#dialog').dialog('open');
});
$('#btnSave').on('click', function(){
if(comprobarCamposRequired()){
Save();
}else{
alert("llene todos los campos");
}
} );
// $('#btnSave').on('click', comprobarCamposRequired);
$('#btnCancel').on('click', function(){
dialog.dialog("close");
});
$('.solo-numero').keyup(function (){
this.value = (this.value + '').replace(/[^0-9]/g, '');
});
$(function($){
$.datepicker.regional['es'] = {
closeText:'Cerrar',
currentText:'Hoy',
monthNames:['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort:['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames:['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort:['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin:['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader:'Sm',
dateFormat:'dd/mm/yy',
firstDay:1,
isRTL:false,
showMonthAfterYear:false,
yearSuffix:''
};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
$("#fchFecha").datepicker({
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "img/calendar.gif",
buttonImageOnly: true,
showAnim: "drop",
buttonText: "Selecione una Fecha"
});
$('#button').hide();
function comprobarCamposRequired(){
var correcto=true;
var campos=$('input[type="text"]:required');
var select=$('select:required');
$(campos).each(function() {
if($(this).val()==''){
correcto=false;
$(this).addClass('error');
}
});
$(select).each(function() {
if($(this).val()==''){
correcto=false;
$(this).addClass('error');
}
});
return correcto;
}
$('input[type="text"]:required').click(function(){
$(this).removeClass('error');
});
var hoy = new Date();
dia = hoy.getDate();
mes = ((hoy.getMonth() + 1) < 10 ? '0' : '') + (hoy.getMonth() + 1);
anio = hoy.getFullYear();
fecha_actual = String(dia+"/"+mes+"/"+anio);
$("#fchFecha").val(fecha_actual);
});