0

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&oacute;n</th>
            <th class="center">Direcci&oacute;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&oacute;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&oacute;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?

4
  • Lo que quieres decir es que el evento onclick no funciona cuando tu llamada AJAX se completa y se agrega la fila, en esa fila no funciona el onclick al span asociado ? el 5 feb. 2019 a las 13:39
  • exactamente, es lo que me sucede el 5 feb. 2019 a las 15:26
  • que me recomienda el 5 feb. 2019 a las 16:11
  • he formulado una respuesta. el 5 feb. 2019 a las 16:14

2 respuestas 2

0

El evento onclick no funciona como esperas porque estas intentando renderizar parte de twig en tu javascript, me explico;

cuando haces el append con tu codigo javascript despues de que la llamada AJAX es exitosa;

$('#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&oacute;n Laboral" class="blue">' +
                '<i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></td>' +
                '</tr>');

Intentas renderizar codigo del motor de plantillas twig en tu javascript, esto no funcionara ya que el motor funcona con PHP y no con javascript, es normal intentar hacer este tipo de cosas.

Recomendación;

En el AJAX cuando recibas la respuesta deberias recibir el Id persona que necesitas;

Ejemplo;

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,' + data.idPersona +')" title="Editar Ocupaci&oacute;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);
    }
    });
}

Nota que he agregado data.idPersona en vez de {{ $regMiembro->persona->id }} ten en cuenta que esto solo funciona si el servidor te retorna idPersona.

Actualización

Veamos el siguiente caso "hipotético" donde este código que te planteo si funciona en una "Hipotéticamente devolución ajax correcta" que en este caso sera hacer click sobre un botón;

    function capturarEnvio(nodo_result) {
        let datos = {lugar_trabajo:'Foo',ocupacion_laboral:'bar',idPersona:'1'};
        let direccion = 'some';

        $('#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,' + datos.idPersona + ')" title="Editar Ocupaci&oacute;n Laboral" class="blue">' +
            '<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>&Tab;mi span</span></td>' +
            '</tr>');

    }

    function transformarEnEditable(){
        alert('Mi span funciona');
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cargo_actual">
    <button onclick="capturarEnvio(this)">Agregar Envio</button>
</div>

El resultado final es un Alert al hacer click sobre el span.

5
  • Amigo lo probé como me lo recomendó pero sigue igual, en esa fila no funciona el onclick al span que tengo asociado el 5 feb. 2019 a las 20:50
  • @albertolg89 y la consola del navegador que te arroja ? el 5 feb. 2019 a las 20:52
  • absolutamente nada, es muy extraño, es como si no reconociera después el nodo que le estoy pasando el 5 feb. 2019 a las 21:00
  • @albertolg89 te he agregado mas info donde planteo un ejemplo hipotético que si hace funcionar tu código. el 5 feb. 2019 a las 21:17
  • Amigo resolvi el problema que tenia, todo era por el if, pongo una respuesta con lo que sucedia el 6 feb. 2019 a las 16:31
0

El problema que tenia cuando ejecutaba la función transformarEnEditable era con el if (editando == false) que cuando la función se ejecutaba la variable editando se le asignaba el valor de true y por tanto cuando se volvía a ejecutar la función como era true y no false no ejecutaba el código. Por tanto en el método que envía los datos para la base de datos asigne el valor de false a la variable editando nuevamente. Quedo de esta manera y ahora funciona perfecto:

Funcion

function transformarEnEditable(nodo, id){

    id_venta = id;

    if (editando == false) {

        var nodoTd = nodo.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";
    }
}

Funcion que envia a la base de datos

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, '+ data.idPersona +' }})" title="Editar Ocupaci&oacute;n Laboral" class="blue">' +
                '<i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></td>' +
                '</tr>');

editando = false;

        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
    }
    });
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.