0

estoy tratando de cerrar una ventana modal con sweet alert2 pero no me funciona, tengo mi modal editar el cual tiene dos botones: Regresar y Cancelar

Al dar click en el boton "Regresar" me muestra una alerta con Sweet la cual pregunta si estoy segura de regresar y tiene otros dos botones que son de confirmación: "Aceptar y Cancelar", si doy click en aceptar quiero lograr que cierre el modal, en cancelar pss no hace nada me deja en el modal que estaba

Tengo una tabla con el listado de clientes y el boton de editar, con este inicializo el modal:

    @foreach ($clientes as $c)
    <tbody>
        <tr>
            <td hidden="">{{ $c->id }}</td>
            <td><a href="{{ route('admin.clientes.show', $c) }}">{{ $c->RFC }}</a></td>
            <td>{{ $c->emailFacturacion }}</td>
            <td>{{ $c->telefono }}</td>
            @if ( $c->estatusClie === 'Activo' )
            <td class="px-6 py-4" style="background: #D5F5E3;">
            <div class="text-sm text-gray-900">Activo</div>
            </td>
            @elseif ($c->estatusClie === 'Inactivo')
            <td class="px-6 py-4" style="background: #EC7063;">
                                           <div class="text-sm text-gray-900">Inactivo</div>
                                            </td>
            @endif
            @can('admin.clientes.update')
            <td width="10px">
                <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModalE{{ $c->id }}" data-backdrop="static" data-keyboard="false" style="color:white">
                <span style="color:white"></span> {{ __('Editar') }}
                </a>
<!-- COMIENZA MODAL EDITAR CLIENTE -->
    <form action="{{ route('admin.clientes.update', $c->id) }}" method="POST">
    @csrf @method('PUT')
    <div class="modal fade text-left" name="myModalE" id="myModalE{{ $c->id }}" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('Editar cliente') }}</h4>

Pero no me cierra el modal, aqui esta mi modal, le quite campos del formulario para que no se vea mucho texto:

<!-- COMIENZA MODAL EDITAR CLIENTE -->
<form action="{{ route('admin.clientes.update', $c->id) }}" method="POST">
@csrf @method('PUT')
<div class="modal fade text-left" name="myModalE" id="myModalE{{ $c->id }}" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ __('Editar cliente') }}</h4>                    
            </div>
            <div class="modal-body">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>{{ __('Número') }}:</strong>
                        <input class="form-control col-md-6" type="text" name="numero" value="{{ $c->num }}">
                    </div>
                </div>
                @error('numero')
                      <div class="alert alert-danger" role="alert">
                           *{{ $message }}
                      </div>  
                @enderror
                <div class="form-group col-md-12">
                     <a href="#" class="btn btn-success" onclick="BackEdit()">
                            <span style="color:white"></span> {{ __('Regresar') }}
                        </a>
                    <button type="submit" class="btn btn-success">{{ __('Guardar') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

y este es mi script:

< script type = "text/javascript" >

  function BackEdit() {
    $modal = $('#myModalE($c->id)');
    Swal.fire({
      title: '¿Seguro que quieres regresar?, al hacerlo se borrarán todos los datos ingresados en el formulario.',
      showDenyButton: true,
      confirmButtonText: 'Aceptar',
      denyButtonText: `Cancelar`,
    }).then((result) => {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        $modal.on('hide');
      }
    })
  }

  <
  /script>

Como pueden notar uso hide para ocultarlo, pero no se oculta, también probé con

remove y removeClass

Y si me oculta el modal pero ya no me deja abrir otro al dar click en editar

6
  • 1
    Si la variable $modal es el elemento de la clase modal, y estás usando el modal de Bootstrap, entonces para cerrarlo deberías poner $modal.modal("hide")
    – msalinas
    Commented el 3 ene. 2022 a las 9:35
  • Hola, gracias por responder, ya lo probé pero tampoco me funciona Commented el 3 ene. 2022 a las 16:17
  • 1
    A ver si puedes poner cómo inicializas $modal, y si puedes añadir algo más de info para intentar ayudar: si es el modal de Bootstrap, cómo abres el modal,... Gracias!
    – msalinas
    Commented el 3 ene. 2022 a las 17:08
  • 1
    En el código no veo que inicialices en nigún sitio la variable $modal, quizás por eso no te está funcionando. Lo que tendrías que hacer para cerrarlo es document.getElementsByClassName("modal")[0].modal("hide"). En verdad sería mejor hacer la búsqueda por ID, pero no sé si tendrás posibilidad de poner el ID correcto porque veo que es variable. Si tienes posibilidad de pasar el valor a JS sería de la siguiente forma document.getElementById("myModalE{{ $c->id }}").modal("hide");. A ver si hay suerte
    – msalinas
    Commented el 4 ene. 2022 a las 13:50
  • 1
    Veo que ahora has añadido la inicialización de la variable $modal. A primera vista, sin poder probar no lo veo. Te diría que hicieras alguna prueba como mirar cuando pones $modal.modal("hide") que error te muestra en la consola (si es que muestra alguno). O, por si acaso, pruebes a buscar el elemento de alguna manera diferente, por ejemplo con $modal = $("div.modal"). Mucha suerte!
    – msalinas
    Commented el 4 ene. 2022 a las 19:11

1 respuesta 1

1

Si la variable $modal es el elemento de la clase modal, y estás usando el modal de Bootstrap, entonces para cerrarlo deberías poner $modal.modal("hide").

Como no se las posibilidades que tienes de obtener el modal por id, lo puedes obtener por clase. Para hacerlo de esta manera, la variable $modal sería algo como $("div.modal") si usas jQuery, y si no usas ningún framework para Javascript sería algo como document.getElementsByClassName("modal")[0].

Espero que te sirva de ayuda 😊

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.