0

Hola!!! Estoy trabajando con una tabla dinámica para agregar/eliminar relaciones de acceso a los roles de mi aplicación. Todo funciona bien al agregar, pero al eliminar una fila de la tabla dinámica (en mi vista) me lanza el siguiente error en javascript: [Violation] 'click' handler took 6331ms javascript Todos los coemntarios dicen que es un bug de chrome versión 58, 56, etc pero mi versión es la 68 y el error sigue ahí. Les comparto mi código (ya probé sustituyendo el checkbox por button y el error sigue)

<div class="box box-success" style="padding:30px;">
<div class="panel panel-primary">
    <div class="panel-heading">Cadena de Ventas/Rol</div>
</div>
    <div class="row" id="mydiv">
        <div class="card card-warning">
            {!! Form::open(array('url' => '', 'method' => 'POST'))!!}
              {!! Form::hidden('id_role', $id_role, ['id' => 'id_role'] )!!}
                {{ csrf_field() }}
                <div class="form-group">
                    <label>Canal:</label>
                    {!! Form::select('id_canal',  [''=>'::Seleccione::']+$canales,  NULL, ['class' => 'form-control', 'id' => 'id_canal', 'required' ]   )!!}    
                </div>
                <div class="form-group">
                    <label>Cadena Ventas:</label>
                    {!! Form::select('id_cadena_venta', $cadena_ventas,  NULL, ['class' => 'form-control', 'id' => 'id_cadena_venta', 'required'])!!}    
                </div>
                <div class="card-footer">
                    <button type="button" id="add" class="add-row ">Agregar</button>
                </div>
                <table class="table table-hover" id="tabla">
                    <thead class="thead-light">
                        <tr>
                            <th>Seleccione</th>
                            <th>Canal</th>
                            <th>Cadena Ventas</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php
                    //dd($cadena_roles);
                    ?>
                        @foreach ($cadena_roles as $object)

                        <tr > 
                        <td><input type='checkbox' value="{{ $object->id_cadena_roles }}" name='record' id="{{ $object->id_cadena_roles }}"></td>
                            <!-- <td><input type='checkbox' value="{{ $object->id_cadena_venta }}" name='record'></td> -->
                            <td>{{ $object->des_canal }}</td>
                            <td>{{ $object->des_cadena_venta }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <button type="button" class="delete-row">Borrar</button>
            {!! Form::close() !!}
        </div>
    </div>
</div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script type="text/javascript">
$('#id_canal').change(function(){
    var id_canal = $(this).val();
    var id_rol = $("#id_role").val();
    var token = $("input[name='_token']").val();
    $.ajax({
        url: "selectEditAjax",
        method: 'POST',
        data: {id_canal:id_canal, id_rol:id_rol, _token:token},
        success: function(data) {
            $("select[name='id_cadena_venta'").html('');
            $("select[name='id_cadena_venta'").html(data.options);
        }
    });
});

$(document).ready(function(){

    //$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

    var arrayvalores = []; 
    var id_rol = $("#id_role").val();
    var token = $("input[name='_token']").val();
    $(".add-row").click(function(){
        var name = $("#id_canal option:selected").text();
        var email = $("#id_cadena_venta option:selected").text();
        var id_canal = $("#id_canal").val();
        var id_cadena_venta = $("#id_cadena_venta").val();

        //alert(arrayvalores+ "id rol "+id_rol+" cadena venta "+id_cadena_venta_+" token "+token);
        $.ajax({
            url: "storeEditAjax",
            method: 'POST',
            data: {id_rol:id_rol, id_cadena_venta:id_cadena_venta, _token:token},
            success: function(data) {


                 //alert(data);   

                var markup = "<tr><td><input type='checkbox' value="+data+" name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
                //arrayvalores.push(id_cadena_venta_);
                $("table tbody").append(markup);
                //recargar el combo de cadenas, eliminando la que ya se guardó
                $.ajax({
                    url: "selectEditAjax",
                    method: 'POST',
                    data: {id_canal:id_canal, id_rol:id_rol, _token:token},
                    success: function(data) {
                        $("select[name='id_cadena_venta'").html('');
                        $("select[name='id_cadena_venta'").html(data.options);
                    }
                });
            }
        });
    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){

        $("input[type=checkbox]").each(function(){
        if($(this).is(":checked")) {
            //alert($(this).val());

                var id_cadena_roles = $(this).val();
                $(this).parents("tr").remove();
                //alert("id "+id_cadena_venta+" id rol "+id_rol);
                $.ajax({
                    url: "deleteEditAjax",
                    method: 'POST',
                    data: {id_cadena_roles:id_cadena_roles, _token:token},
                    success: function(data) {

                        $(this).parents("tr").remove();
                    }
                });   
                //recargar el combo de cadenas, eliminando la que ya se guardó
                $.ajax({
                    url: "selectEditAjax",
                    method: 'POST',
                    data: {id_canal:id_canal, id_rol:id_rol, _token:token},
                    success: function(data) {
                        $("select[name='id_cadena_venta'").html('');
                        $("select[name='id_cadena_venta'").html(data.options);
                    }
                });

            }
        });
    });
});    


 </script>
2
  • Buenas tardes Virginia. Este tipo de mensajes tratan de alertarte como desarrollador y ayudarte a mejorar tu sentencia de instrucciones. En este caso chrome trata de advertirte que un evento 'click' tardo demasiado '6XXX ms' y que considera excesivo. Seguramente por la iteración .each que ejecutas cada vez que realizar 'click' en el elemento '.delete-row' Aún así, ¿Qué no funciona como esperas? ¿No se eliminan los elementos? Commented el 20 ago. 2018 a las 14:15
  • Si se eliminan, pero se queda "colgado" unos segundos. Traté de resolverlo, eliminando los checkbox y en su lugar colocándole un botón "eliminar" a cada fila, pero el error sigue
    – Virginia
    Commented el 20 ago. 2018 a las 15:11

1 respuesta 1

0

Por supuesto, el evento delete-row click es demasiado lento de esa manera... Te recomiendo otro enfoque totalmente distinto...

Ahora mismo se invocan dos ajax (deleteEditAjax y selectEditAjax) por cada elemento que quieres borrar...

Un cambio importante sería construirte un array con los elementos que quieres borrar, y luego hacer una sola vez, las llamadas a tus dos ajax...

Aquí te crearías ese array de los seleccionados...

var seleccionados = [];
$("input[type=checkbox]").each(function(){
        if($(this).is(":checked")) 
           seleccionados.push($(this).val());
}         

Y con eso se acabaron tus bucles... Ahora en los ajax's pasas el array seleccionados en vez de un sólo valor como tenías antes...

data: {seleccionados:seleccionados, _token:token},

Solo queda, cambios en la url: deleteEditAjax y selectEditAjax, ya que, como lo tienes ahora, aparte del token que reciben, esperaban un solo elemento a borrar, y ahora llega un array...

Un saludo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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