Tengo el problema de que no puedo mostrar mi preloader:
En primer lugar oculto el preloader Indeterminate de materialize link del preloader de materialize para mostrar mis tablas.
Cuando hago clic en aceptar en mi sweetalert necesito que se muestre el preloader para mostrar la carga de las filas de mis tabas ya que son dinámicas.
Cuando termine de cargar necesito que se oculte nuevamente mi progress bar.
Mi código es la siguiente:
HTML: este es mi Preloader de materialize
<div class="progress container " id= "progreso">
<div class="indeterminate"></div>
</div>
JS:
$("#progreso").hide(); // <-----primero lo oculto para mostrar mi tabla
$(document).ready(function() {
$('#btnEnviar').click(function() {
Swal.fire({
title: "Ingrese una fecha inicial y una final",
confirmButtonText: "Aceptar",
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showDenyButton: true,
denyButtonText: "Cancelar",
background: "linear-gradient(63deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 37%, rgba(0,212,255,1) 100%)",
color: "#FFFFFF",
html: '<input type="date" id="Date1" class="flex-nowrap w-50 swal2-input">' + '<br>' +
'<input type="date" id="Date2" class="flex-nowrap w-50 swal2-input">',
}).then(function(isConfirm) {
cuando de aceptar quiero que se muestre mi preloader
var date1 = $('#Date1').val();
var date2 = $('#Date2').val();
if (isConfirm.isConfirmed) {
if (date1 > date2) {
$("#progreso").show(); //*!mostrar el progressbar
$.ajax({
type: "POST",
url: url2,
dataType: "json",
data: { 'date1': date1, "date2": date2 },
success: function(datospos) {
$("#table").empty();
datospos.forEach(pos => {
var tablapos = "<tr>" +
"<td>" + pos.name + "</td>" +
"<td>" + pos.venta + "</td>" +
"<td>" + pos.date + "</td>" +
"<td>" + pos.asistencia + "</td>" +
"<td>" + pos.factor + "%" + "</td>" +
"</tr>";
$("#table").append(tablapos);
}); // termia el foreach
}
});
});
$('#progreso').hide(); // <----- ocultar la barra de progreso nuevamente cuando termine de cargar todas las tablas
});
Espero y me puedan ayudar :(
<div class="progress container " **id= "progreso"**> <div class="indeterminate"></div> </div>
}); // termia el foreach