Estoy intentando editar elementos en un datatable con javascript. La idea es no tener es actualizar los elementos en la misma tabla sin tener que cambiar de vista y sin tener que recargar. A continuación dejo mi código html y javascript:
HTML
<form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="center">Centro Laboral</th>
<th class="center">Ocupación</th>
<th class="center">Dirección</th>
<th class="center">--</th>
</tr>
</thead>
<tbody id="cargo_actual">
<tr id="actual">
<td class="center" style="padding: 20px" id="lugar_trabajo">{{ $regMiembro->persona->lugar_trabajo }}</td>
<td class="center" style="padding: 20px" id="ocupacion_laboral">{{ $regMiembro->persona->ocupacion_laboral }}</td>
<td class="center" style="padding: 20px">
{{ $regMiembro->persona->DireccionTrabajo() }}
</td>
<td class="center" style="padding: 20px">
<span onclick="transformarEnEditable(this, {{ $regMiembro->persona->id }})" title="Editar Ocupación Laboral" class='blue'>
<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
</span>
</td>
</tr>
</tbody>
</table>
</form>
JAVASCRIPT
function transformarEnEditable(nodo, id){
id_venta = id;
nodo_result = nodo;
if (editando == false) {
var nodoTd = nodo_result.parentNode; //Nodo TD
var nodoTr = nodoTd.parentNode; //Nodo TR
var nodosEnTr = nodoTr.getElementsByTagName('td');
var lugar_trabajo = nodosEnTr[0].textContent;
var ocupacion_laboral = nodosEnTr[1].textContent;
direccion = nodosEnTr[2].textContent;
var nuevoCodigoHtml =
'<tr id="actual">'+
'<td ><input type="text" name="numeracion" id="pagado_deuda" value="'+lugar_trabajo+'" size="15"></td>' +
'<td class="align-center"><input type="text" class="form-group" name="pagado_producto" id="pagado_producto" value="'+ ocupacion_laboral +'" size="15"></td>' +
'<td class="align-center">'+ direccion +'</td>' +
'<td class="align-center"><a onclick="capturarEnvio(this)" class="green" title="Aceptar">' +
'<i class="ace-icon fa fa-check bigger-120"></i></a> ' +
'<a onclick="anular()" class="red" title="Cancelar"><i class="ace-icon fa fa-close bigger-120"></i></a></td>'+
'</tr>';
nodoTr.innerHTML = nuevoCodigoHtml;
editando = "true";
}
}
Después cuando salvo la información quiero poner la nueva información salvada en la misma tabla sin recargar la pagina pero quiero hacerlo sin recargar la página; para esto uso una función llamada capturarEnvio(this)
,
capturarEnvio(this):
function capturarEnvio(nodo_result){
var datos = {
lugar_trabajo: $('#pagado_deuda').val(),
ocupacion_laboral: $('#pagado_producto').val(),
id_venta: id_venta,
};
$.ajax({
type:'POST',
url:'{{ route('regMiembros.change_direccion') }}',
data:{name: datos},
success:function(data){
$('#actual').remove();
$('#cargo_actual').append('<tr id="actual"><td class="align-center">'+ datos.lugar_trabajo +' </td>' +
'<td class="align-center">'+ datos.ocupacion_laboral +'</td>' +
'<td class="center" style="padding: 20px">'+ direccion +'</td>' +
'<td class="center" style="padding: 20px">' +
'<span onclick="transformarEnEditable(this, {{ $regMiembro->persona->id }})" title="Editar Ocupación Laboral" class="blue">' +
'<i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></td>' +
'</tr>');
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
}
Todo se ejecuta perfectamente pero una vez se ejecuta el append parece en la tabla la nueva fila pero la opción del botón para poder transformar la fila en editable no se habilita. ¿Cómo poder resolver esto?
onclick
no funciona cuando tu llamada AJAX se completa y se agrega la fila, en esa fila no funciona elonclick
al span asociado ?