0

Estoy guardando una selección con unos checkbox y el ajax recorre todos los campos pero hace envios casi simultaneos, por lo que solo se guarda el primero de las dos seleciones, intente con un setTimeout pero no funciono, la unica forma es haciendo un async: false pero eso evita que funcione el modal con la barra de carga

muchas gracias por su ayuda de antemano

    $(document).on('click','#btn_procesar', function(event){
        var dispositivo = $("#dispositivo").val();
        var id = ($("#btn_procesar").attr("name"));
        var origen = 0;
        procesado = getDocumentosProcesados(id, origen);
        origen = procesado.origen;
        documentosProcesados = procesado.documentosProcesados;

        if(documentosProcesados.length === 0) {
            mostrarModalAlerta('Debe seleccionar al menos un archivo para procesar firma');
            return false;
        }
        if(dispositivo === 'movil'){
            $('#modalIngresoPin').modal('show');
            $("#ingresarPinInput").val("");
        }
        if(dispositivo === 'tablet'){
            if (documentosProcesados.length !== 1) {
                mostrarModalAlerta('Debe seleccionar únicamente un (1) archivo para procesar firma');
                return false;
            }
            var rutFirmante = $("#rutFirmante").val();
            $.each(documentosProcesados, function( index, value ) {
                procesarId( value, origen, '', rutFirmante, dispositivo);
            });
        }
    }); 

    function getDocumentosProcesados(id, origen){
        var documentosProcesados = [];
        if(id==0){
            origen = 1;
            var items = extJsPanelPorFirmar
                .getSelectionModel()
                .selected
                .items;

            if( items.length > 0 ){
                $.each( items, function( indice, item ){
                    documentosProcesados.push( item.data.LTO01_id );
                });
            }
        }
        if(id>0){
            origen = 2;
            $('#tblDocumentosPorFirmarPorCaso tr td :checkbox:checked').map(function () {
                documentosProcesados.push( $(this).data('idDocumento') );
            }).get();
        }
        return {"origen": origen, "documentosProcesados": documentosProcesados};
    }
    
    function procesarId(id, origen, PIN, rutFirmante, dispositivo){
        
        mostrarModalProcesarFirmas();
        $.ajax({ 
            url: AppOrquestador.urlFirmarDocumento,
            method: 'POST',
            data: {
                id: id,
                origen: origen,
                PIN : PIN,
                rutFirmante: rutFirmante,
                dispositivo: dispositivo
            },
            dataType: 'Json'
        }).done(function(response){
            if(response.error){
                $("#modalProcesandoDocumentos .close").click();
                actualizar_datos();
                mostrarModalAlerta(response.mensaje);
                return false;
            }
            documentosProcesadosEnviados++;
            actualizarProcesoDocumentosProcesados();
            if(response.dispositivo == "tablet"){
                mostrarModalAlerta(response.mensaje);
                window.open(response.url,"_self");
            }
            if(response.dispositivo == "movil"){
                mostrarModalAlerta(response.mensaje);
            }
        }).fail(function (jqXHR, textStatus) {
            $("#modalProcesandoDocumentos .close").click();
            mostrarModalAlerta('Ha ocurrido un error');
        });
        $('#select_all_documentos_porFirmar').prop('checked',false);
        $('#select_all_documentos').prop('checked',false);
        return false;
    }

y acá el controlador que lo recibe, sera que estoy recibiendo los datos de mala manera? uno por uno funciona, pero al mismo tiempo se cae

public function docsFirmar( Request $request){
    try{



        $rut = $request->rutFirmante;
        $dispositivo = $request->dispositivo;
        $Objdocumentos = LTO01Documentos::with([
            "tipoDocumento",
            "solicitud",
            'solicitud.firmantes' => function( $query ){
                $query->ordenFirma();
            }
            ])
            ->porFirmar()
            ->autorizado()
            ->paraFirmar()
            ->where('LTO01_Documentos.LTO01_id', $request->id)
            ->get();

        if(!$Objdocumentos){
            return [
                "error" => true,
                'mensaje' => 'No existen documentos'
            ];   
        }
        $documentos = [];
        $firmantesArr = [];
        $firmantesIds = [];
        $respuestaGetMobile = [];
        $firmaRechaza = '';
        $cont = 0;
        $motivoRechazo = '';
        $nombreDocumento = "";
        $idGrupoFirma = '';
        $idDocumento = '';
        $notificarUsuarios = false;

        /**
        * Se deben actualizar las tablas:
        * LTO01Documentos => LTO01_firmado (statusCode: 1 en proceso, 2 firmado, 3 rechazado) y LTO01_fecha_firma (si se realiza la firma)
        * LTO03Firmantes => LTO03_fecha_firma (si se realiza la firma)
        */

        foreach($Objdocumentos as $key => $value){

cualquier ayuda es bien recibida, he leido en foros que laravel tiene problemas con las solicitudes XHR simultaneas

2
  • Falta mostrar la función donde envías con ajax. Hay mucho código ahí irrelevante para el problema y sólo dificulta entender qué hace tu formulario
    – ffflabs
    el 16 ene. 2021 a las 16:09
  • disculpe, no aquí debería estar toda la infomacion de la problemática el 18 ene. 2021 a las 19:56

1 respuesta 1

0

En tu caso veo dos problemas estructurales:

1. forEach no sirve para una secuencia asíncrona

Estás iterando sobre todos los elementos a enviar (y cada uno dispara un request) usando $.each, que por debajo delega a Array.prototype.forEach.

  $.each(documentosProcesados,  function( index, value ) {
          procesarId( value, origen, '', rutFirmante, dispositivo);
  });

por naturaleza, forEach no toma en cuenta ninguna clase de retorno. Puedes modificar cada elemento a tu gusto, pero retornar algo en cada iteración no tiene ningún efecto. Desde afuera ni siquiera es revisado, sin importar si es un escalar, una promesa o un null.

let numeros_al_cuadrado = [1,2,3].forEach(numero=>{
   let cuadrado =   Math.pow(numero,2);
   return cuadrado; // esto no hace nada
});
console.log(numeros_al_cuadrado) ; // undefined

Para que una cola funcione secuencialmente y vaya resolviendo un elemento a la vez (o un subconjunto a la vez) necesitas iterarla con una función o constructo que se preste para esperar (asíncronamente) la resolución de cada elemento. A mí me gusta mucho for..of

 async function iterarAsync(conjuntoDocumentos) {
    for(let documento of conjuntoDocumentos) {
        let resultado = await procesarId(documento);
        console.log(resultado);
    }
 }

2. procesarId devuelve de inmediato.

Para que el bucle realmente espere a la resolución de procesarId esa función tiene que devolverme algo esperable (una promesa). En tu caso en procesarId dice (medularmente)

   function procesarId(documento) {
     $.ajax(...).then(...);
     return false;
   }

El llamado al método ajax es asíncrono y el programa no se detiene ahí, sino que pasa de inmediato al return false;. De vuelta en el bucle, tu iterador vería esto

 async function iterarAsync(conjuntoDocumentos) {
    for(let documento of conjuntoDocumentos) {
        let resultado = await false;
        console.log(resultado);
    }
 }

Usar await con algo que no es promesa equivale a tener una promesa resuelta instantáneamente, y pasas al siguiente. Esto es un error, porque tu request ajax recién va de ida camino al servidor. La modificación 1 entonces sería retornar el llamado ajax mismo

 function procesarId(documento) {
  return $.ajax({ })
    .done(response => {
      if(response.error) {
        // algo
        return false
      }
      if(response.dispositivo...) {
       //  otra cosa
      }
      return ; // o return response , lo importante es retornar algo
   }).fail(err=>{ 
      console.warn(err);
      return false;
   });
 }

con ese cambio procesarId devuelve una promesa. Esa promesa está encadenando el ajax y su resultado con lo que tú retornes, y la resolución del conjunto es justamente eso que retornas, que puede dar lo mismo, con tal que retornes algo. Si una función devuelve una promesa A, que se resuelve con la promesa B, que se resuelve con la promesa C, entonces el valor con que se resuelve C es el valor final de la cadena.

Ejemplo muy burdo

Ya que nuestros snippets no están pensados para el uso de ajax, fetch, iframes ni nada que implique lanzar requests, tuve que hacer un sucedáneo de endpoint. Mi versión de procesarId retorna una promesa que se resuelve con el mismo elemento que le pasé, en un tiempo que va de los 500ms a los 1500ms.

El ejemplo muestra solamente la comparación entre iterar con $.each vs for..of

function echo(data, type) {
  var blob = window.URL.createObjectURL(new Blob([data], {
    "type": type
  }));
  return blob;
};

async function procesarId(doc) {
  return $.ajax({
    url: echo(doc.outerHTML, "text/html"),
    type: 'GET'
  }).then(data => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data);
      }, 500 + Math.random() * 1000);
    });

  });
}




function getDocumentosProcesados() {
  return [...document.querySelectorAll('#tblDocumentosPorFirmarPorCaso input:checked')];
}
const formulario = document.querySelector('#tblDocumentosPorFirmarPorCaso'),
  marcarTodos = document.querySelector('#select_all'),
  enviarBtnSync = document.querySelector('#enviar_sync'),
  enviarBtn = document.querySelector('#enviar');

['documento1', 'autorización', 'licencia', 'declaración', 'testamento', 'demanda'].forEach((materia, index) => {

  let label = document.createElement('label'),
    checkbox = document.createElement('input'),
    nombre = document.createElement('span');
  nombre.textContent = materia;
  checkbox.type = 'checkbox';
  checkbox.title = materia;
  checkbox.checked = true;
  checkbox.id = `checkbox_${index}`;
  label.appendChild(checkbox);
  label.appendChild(nombre);
  formulario.appendChild(label);
})
marcarTodos.addEventListener('click', (e) => {
  [...document.querySelectorAll('#tblDocumentosPorFirmarPorCaso input')]
  .forEach(input => input.checked = true);
});
enviarBtn.addEventListener('click', async(e) => {
  let documentosAEnviar = getDocumentosProcesados();
  for (let documento of documentosAEnviar) {
    let updatedDoc = await procesarId(documento);
    console.log(updatedDoc);
    documento.checked = false;
  }

});

enviarBtnSync.addEventListener('click', async(e) => {
  let documentosProcesados = getDocumentosProcesados();
  $.each(documentosProcesados, function(index, documento) {
    procesarId(documento).then(updatedDoc => {
      console.log(updatedDoc);
      documento.checked = false;
    });

  });

});
#tblDocumentosPorFirmarPorCaso {
  clear: both;
  margin-bottom: 1em;
}

#tblDocumentosPorFirmarPorCaso label {
  display: block;
  padding: 2px;
  5px;
  border: 1px solid #ccc;
  width: 45%;
  float: left;
}

#tblDocumentosPorFirmarPorCaso label span {
  margin-left: 0.5em;
}

p {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="tblDocumentosPorFirmarPorCaso">

</div>

<p>
  <button id="select_all">Marcar Todos</button>

  <button id="enviar">Enviar Async</button>
  <button id="enviar_sync">Enviar Sync</button>

</p>

Nota: la implementación jQuery.Deferred vs Promises/A+

En mi snippet original usé

jQuery.ajax({...}).then(result => {
   // return new Promise bla bla bla
})

Pero me quedó la duda con respecto a la implementación pirata no estándar de Promise/A+ que usa jQuery, en el cual la salida de $.ajax(...) en rigor no devuelve una promesa sino un $.Deferred. Cumplo con informar que usando done el Deferred no respetó la secuencia como sí ocurrió usando then.

1
  • ohh muchísimas Gracias! tengo días con este problema, lo probaré y te comentaré que tal! el 19 ene. 2021 a las 21:25

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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