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
$modal
es el elemento de la clasemodal
, y estás usando el modal de Bootstrap, entonces para cerrarlo deberías poner$modal.modal("hide")
$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!$modal
, quizás por eso no te está funcionando. Lo que tendrías que hacer para cerrarlo esdocument.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 formadocument.getElementById("myModalE{{ $c->id }}").modal("hide");
. A ver si hay suerte$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!