2

Estoy haciendo un proyecto en laravel, pero el problema lo tengo haciendo una petición en ajax. Estoy haciendo una lista de usuarios con un botón de eliminar al final, al pulsar ese botón, aparece una ventana modal (bootstrap) y ahí tengo otro botón (submit) que iría al controlador a eliminar el usuario, el usuario me lo elimina bien, pero hay un problema, en el código jQuery hago que cuando se pulse el submit cambie a rojo y haga un fadeout a la fila, esto lo hace bien y la fila desaparece correctamente salvo por que también desaparece la ventana modal con el fadeout.

Tendría que cerrarse la ventana y a continuación desaparecer la fila, y lo hace al mismo tiempo, aparte de que el fadeout debería aplicarse única y exclusivamente a la fila y no a la ventana modal Aquí mi código.

LISTA DE USUARIOS

<table class="table table-striped table-hover">
                    <thead>
                <tr>
                            <th class="col-md-1">#</th>
                            <th>Tipo</th>
                            <th>Nombre Completo</th>
                            <th>Correo</th>
                            <th colspan="2">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($listaUsuarios as $usuarios)
                        <tr data-identificador="{{$usuarios->id}}">
                            <td class="col-md-1">{{$usuarios->id}}</td>
                            <td>{{$usuarios->tipo}}</td>
                            <td>{{$usuarios->lista_Nombre_Completo}}</td>
                            <td>{{$usuarios->email}}</td>

                             <td>  
                                <button type="button" class="btn btn-danger eliminarAjax" data-toggle="modal" data-target="#myModal_{{$usuarios->id}}">
                                 ELIMINAR
                              </button>
                                <div class="modal fade" tabindex="-1" role="dialog" id="myModal_{{$usuarios->id}}">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                                                <span>Esta a punto de eliminar los datos de </span><h4 class="modal-title" style="color:maroon; font-weight:bolder;">{{$usuarios->lista_Nombre_Completo}}</h4>
                                            </div>
                                            <div class="modal-body">
                                               {{Form::open(array('route'=> array('ajax.usuarios.destroy','USUARIOID'), 'method'
=>'DELETE','id'=>'borrarFormulario'))}}
                                                  <input type="hidden" name="eliminarEnviado" value="enviado">
                                                  <button type="submit" class="btn btn-danger" >ELIMINAR</button>
                                               <!--    <a href="#!" class="btn btn-danger">ELIMINAR</a> -->
                                               {{Form::close()}} 
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar Ventana</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                </div><!-- /.modal -->

                                </td>
                        </tr>
                        @endforeach
                        <tr>
                            <td colspan="5">{{$listaUsuarios->render()}}</td>
                        </tr>
                    </tbody>
    </table>

JQUERY

   $(document).ready(function()         
    {   

        $('#borrarFormulario').click(function(e)
        {

                var fila = $(this).parents('tr');
                var valor= fila.data("identificador");  
                var formulario = $('#borrarFormulario');
                var url = formulario.attr('action').replace('USUARIOID',valor);

                var datos = formulario.serialize();


                    if ($('submit:checked'))
                     {
                        e.preventDefault();
                            alert('pulsado');
                     };

                    $.post(url, datos, function(respuestaAjax)
{
fila.css({'background-color':'maroon','color':'white'}).fadeOut(5000);  
                    })


        })      

No puedo incluir vídeos por que tengo problemas capturando, así que pongo unas imágenes para que veáis el efecto

imagen2 imagen3 imagen4

2
  • 2
    Antes de la línea donde aplicas el css, poner algo como $('#modal').modal('toggle'); o $('#modal').modal('hide'); pasando el Id correcto, obviamente.
    – Shaz
    Commented el 3 may. 2016 a las 13:33
  • No logro entender por que, pero antes lo habia probado y no me funcionaba y ahora por fin me ha funciona. Muchas gracias. Solucionado Commented el 5 may. 2016 a las 11:31

2 respuestas 2

2

El problema radica en que estás aplicando el css a toda la fila (en este caso formada por <tr>...</tr>.

Si deseas cerrar el modal antes (el cual está contenido en dicha fila), debes hacerlo por medio de los métodos que este ofrece (teniendo en cuenta que es un modal bootstrap).

Puedes ver más documentación de los métodos que ofrece el modal de bootstrap aquí: http://getbootstrap.com/javascript/#modals-methods

.modal('toggle')

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

.modal('hide')

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

Aplicándolo a tu código, debería ser implementado antes de aplicar el css y el fadeOut a la fila:

$(document).ready(function()         
{   

    $('#borrarFormulario').click(function(e)
    {

            var fila = $(this).parents('tr');
            var valor= fila.data("identificador");  
            var formulario = $('#borrarFormulario');
            var url = formulario.attr('action').replace('USUARIOID',valor);

            var datos = formulario.serialize();


                if ($('submit:checked'))
                 {
                    e.preventDefault();
                        alert('pulsado');
                 };

                $.post(url, datos, function(respuestaAjax)
                {
             
                // Agregar la siguiente línea pasando el ID correcto
                $('#modal').modal('toggle');
                // También se puede usar $('#modal').modal('hide');

             fila.css({'background-color':'maroon','color':'white'}).fadeOut(5000);  
                })

    })   
1
  • Por favor, añade algún comentario explicando tu respuesta.
    – user74
    Commented el 5 may. 2016 a las 13:50
1

Casualmente esto me paso la semana pasada con algo parecido, solo que yo queria que al momento de mostrar el modal hiciera un focus en el input del modal, y investigando en google lo hice de esta manera:

    $('#modal').modal('show');
$('#modal').on('shown.bs.modal', function() {
    $('#modalinput:text').focus();
});

Cambia el on.('show.bs.modal' por on.('hidden.bs.modal' y luego escribes tu codigo para que oculte la fila <tr>, prueba y me comentas.

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.