Indicador de Progreso en Botón Run

Fausto Martinez

unread,

Jul 17, 2023, 11:21:20 AM7/17/23

to Comunidad ScriptCase Latino

Cuando tenemos algún proceso en un botón run que debe recorrer varios registros y este podría tardar el tiempo suficiente para desesperar al usuario, una buena forma de indicarle al usuario que aún está procesando es utilizar un gif animado que permita mostrar que aún se está procesando los registros. Para esto será necesario utilizar algunos trucos JavaScript los cuales describo a continuación.

1.- En el scriptInit reprogramamos el botón RUN, en este caso el botón tiene el nombre “btnRuntest”, así que en el código siguiente debes de cambiar ese nombre por el nombre con el que denominó su botón.

onScriptInit

?>
<!DOCTYPE html>
<html>
<head>
<style>
#gif-container { display: none; position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 9999; pointer-events: none;
}

#gif-container.show {display: block;}

#miDiv { display: none; position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
#miDiv.show {display: block;}
</style>
</head>
<body>
<div id="gif-container">

<img src="https://i.gifer.com/ZNeT.gif" width="250" height="250" alt="GIF">
</div>
<div id="miDiv"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// Obtener el botón
var elemento = document.getElementById('sc_btnRuntest_top');
if (typeof sc_btn_btnRuntest === 'function') {
// Eliminar el método que llama el boton
delete window.sc_btn_btnRuntest;
}

// Re-Crear el método que llama el botón
window.sc_btn_btnRuntest = function() {
var checked_records, i;
vls_check = "";
checked_records = $(".sc-ui-check-run").filter(":checked");
for (i = 0; i <= checked_records.length; i++)
{
vls_check += (vls_check != "") ? ";" : "";
vls_check += $(checked_records[i]).val();
}
if (vls_check == "" || vls_check == "0" || vls_check == "undefined")
{
scJs_alert ("Seleccionar datos");
return;
} else {
document.getElementById("miDiv").classList.add("show");
// Mostrar el gif
document.getElementById("gif-container").classList.add("show");
}
document.FBtn_Run.nm_run_opt_sel.value = vls_check;
document.FBtn_Run.target = "_self";
document.FBtn_Run.nm_call_php.value = "btnRuntest";
document.FBtn_Run.submit() ;
};
});

</script>
</body>
</html>
<?php

2.- Para mostrar un mensaje al terminar el proceso abrimos pondremos el siguiente código en el método “onFinish” del botón Run.

onFinish

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<script src="<?=$this->Ini->path_prod;?>/third/jquery/js/jquery-3.6.0.min.js"></script>


<script src="<?=$this->Ini->path_prod.'/third/sweetalert/sweetalert2.all.min.js'?>"></script>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {

// hacemos el botón ok invisible
var input = document.querySelector('input[name="nmgp_bok"]');
input.style.display = "none";

Swal.fire({ timer: 4000, toast: true,showConfirmButton: false,
type: 'success', //"warning", "error", "success" and "info".
html: '  Todos los registros fueron procesados de forma exitosa.',
}).then(() => {
// Enviamos un click al botón ok, para recargar
input.click();
});

});
</script>
</body>
</html>

<?php

Ya con esto tendremos lo que buscamos.

Diego Fisolo

unread,

Jul 17, 2023, 12:38:28 PM7/17/23

to Comunidad ScriptCase Latino

Excelente Aporte !! gracias Fausto!!

--
Has recibido este mensaje porque estás suscrito al grupo "Comunidad ScriptCase Latino" de Grupos de Google.
Para cancelar la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a comunidad-scriptcase-...@googlegroups.com.
Para ver esta conversación en el sitio web, visita https://groups.google.com/d/msgid/comunidad-scriptcase-en-latino/CAOAG9yEtSRm74MVUhRs%3DtzYfvaS7ZMz9UaTayPBqSdtroC0mVg%40mail.gmail.com.

Reply all

Reply to author

Forward

Message has been deleted