2

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):

introducir la descripción de la imagen aquí

1 respuesta 1

1

Creo que lo puedes resolver así:

Para que el boton no haga submit debes ponerle

type="button"

luego puedes tener la url para eliminar en un data-action en lugar de action

data-action="{usuarioControlador.eliminar(item)}"

en el código jquery puedes recuperar la url para eliminar del boton con

var url = $('.red').data('action');

y cuando confirmen el alert haces

window.location=url;

para que te redirija a la vista de eliminar.

El código te funcionaria así:

function swalConfirm() {

  var url = $('.red').data('action');
  console.log(url);
  
    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) {
          console.log('eliminar');
          window.location=url;
        }
    });
}
<?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" type="button" data-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="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

3
  • No funciona, así lo hice, pero al abrir la vista, va de inmediato al controlador sin antes haber dado clic al botón eliminar, aparte no solo elimina el registro seleccionado, sino todos los registros de la tabla el 10 oct. 2019 a las 20:52
  • entiendo @AndrésDavid voy a revisar la actualizacion de la pregunta para mejorar mi respuesta.
    – erika_chan
    el 10 oct. 2019 a las 22:04
  • 1
    muchas gracias por tu ayuda. el 10 oct. 2019 a las 22:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.