Modal window and ajax delete request run at the same time

I am doing a project in laravel, but the problem I have doing a request in ajax. I am making a list of users with a Delete button at the end, when I Press that button, a modal window appears (bootstrap) and there I have another button (submit) that would go to the controller to delete the user, the user deletes it for me fine, but there is a problem, in the code jQuery I make when the submit is pressed and the row disappears correctly except that the modal window with the fadeout also disappears.

Would have to close the window and then disappear the row, and it does so at the same time, other than that the fadeout should be applied solely and exclusively to the row and not to the modal window Here's my code.

LIST OF USERS

<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);  
                    })


        })      

I can't include videos because I have trouble capturing, so I put some images so that see the effect

image2 image3 image4

 2
Author: Oundroni, 2016-05-03

2 answers

The problem is that you are applying the css to the entire row (in this case formed by <tr>...</tr>.

If you want to close the modal before (which is contained in that row), you must do so using the methods it offers (considering that it is a bootstrap modal).

You can see more documentation of the methods offered by the bootstrap modal here: http://getbootstrap.com/javascript/#modals-methods

.modal ('toggle')

Manually toggles to 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).

Applying it to your code, it should be implemented before applying the css and fadeOut to The Row:

$(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);  
                })

    })   
 2
Author: Shaz, 2020-06-11 10:54:57

Coincidentally this happened to me last week with something similar, only that I wanted at the time of displaying the modal to do a focus in the input of the modal, and researching in google I did it this way:

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

Change the on.('show.bs.modal' by on.('hidden.bs.modal' and then you write your code to hide the row <tr>, try and comment me.

 1
Author: StevePHP, 2016-09-03 11:47:13