tengo un problema al momento de mostrar una alerta de SweetAlert2, y es que la alerta dura menos de un segundo y enviar los datos al controlador y la vista se recarga mostrando que se eliminó el registro.
El procedimiento normal sin confirmaciones, es que al dar clic al botón de eliminar del registro, los datos se envían al controlador y se eliminan dicho registro, luego retorna a la vista con la lista, mostrando que se efectúa la eliminación.
Busco que antes de que se envíen los datos al controlador, con precisión una alerta pidiendo la confirmación de la acción, algo como el confirmar de javascript pero con los estilos de SweetAlert2.
Vista:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
<title>Lista</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" href="../Views/css/fonts.css" />
</head>
<body style="padding: 30px;">
<f:view>
<h:form id="form">
<h1><h:outputText value="List"/></h1>
<h:dataTable id="table" class="responsive-table" value="#{usuarioControlador.consultarTodos()}" var="item">
<h:column>
<f:facet name="header">
<h:outputText value="ID"/>
</f:facet>
<h:outputText value="#{item.idUsuario}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Cedula"/>
</f:facet>
<h:outputText value="#{item.cedulaUsuario}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Nombre"/>
</f:facet>
<h:outputText value="#{item.nombreUsuario}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Primer Apellido"/>
</f:facet>
<h:outputText value="#{item.primerApellidoUsuario}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Email"/>
</f:facet>
<h:outputText value="#{item.emailUsuario}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Tipo de Usuario"/>
</f:facet>
<h:outputText value="#{item.tipoUsuario.tipoUsuario}"/>
</h:column>
<h:column>
<h:commandLink class="btn-small yellow darken-1" action="#{usuarioControlador.preActualizar(item)}">
<i class="material-icons">edit</i>
</h:commandLink>
<h:commandButton class="btn-small red darken-1" action="#{usuarioControlador.eliminar(item)}" value="Borrar" onclick="swalConfirm()"/>
</h:column>
</h:dataTable>
</h:form>
</f:view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"/>
<script src="../Views/js/swal.js"/>
</body>
</html>
JavaScript:
function swalConfirm() {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
}
});
}
Controlador:
public String eliminar(Usuario eliminar) {
usuarioFacade.remove(eliminar);
return "list";
}
Ya he intentado con event.preventDefault(); y cuando se presiona el botón de confirmación $("#form").submit(); y al momento de dar clic en confirmar se recarga la vista pero no se elimina el registro y con puntos de interrupción vi que no entra al controlador.
Gracias por la ayuda.
Anexo screenshot de la tabla(normalmente se abre en un iframe al dar consultar usuarios):