Necesito esperar hasta que se hayan completado tres llamadas ajax hasta que comience otra función. Intenté usar la promesa diferida de jquery https://api.jquery.com/deferred.promise/ pero mis trabajos se devuelven antes de que se carguen los datos diferidos. Necesito forzar la finalización de estas tres llamadas ajax antes de activar la función. No estoy atado a usar diferido, eso parecía ser el camino lógico a seguir.
Estoy usando tablas de datos y necesito que se completen las llamadas ajax antes de que se carguen los datos en ellas.
"ajax":{ "url": API_ROOT + "jobs?available=true&max_results=500", "dataSrc": function(data){ function all_loaded(){ var dfd = $.Deferred(); var mats_loaded, fins_loaded, pros_loaded; setTimeout(function(){ $.ajax({ url: API_ROOT + "finishes?max_results=500", dataType: 'json', error: function(){ console.log("Error getting finishes"); }, success: function(data){ finishes = data._items; fins_loaded = true; check_all_loaded(); } }); },2000); $.ajax({ url: API_ROOT + "processes?max_results=500", dataType: 'json', error: function(){ console.error("Error getting processes"); }, success: function(data){ processes = data._items; pros_loaded = true; check_all_loaded(); } }); $.ajax({ url: API_ROOT + "materials?max_results=500", dataType: 'json', error: function(){ console.log("Error getting materials"); }, success: function(data){ materials = data._items; mats_loaded = true; check_all_loaded(); } }); check_all_loaded = function(){ if (mats_loaded && fins_loaded && pros_loaded){ dfd.resolve("Loaded"); } } return dfd.promise(); } $.when( all_loaded()).then(function(){ var jobs = data._items; //a bunch of other stuff return jobs; }); } }El .when finalmente se dispara, ese no es el problema, el problema es que el .when no devuelve nada para los datos porque las llamadas Ajax no se han completado. Esencialmente, necesitamos el .when para dejar de ejecutar todos los js hasta que se resuelva la promesa.
Perdón por el código largo, solo quiero estar completo y quería señalar que tengo tres llamadas Ajax separadas. Gracias por tus pensamientos.
Puede usar $.when y pasar todas las llamadas ajax que necesita esperar.
Ejemplo:
var ajax1 = $.ajax(..) var ajax2 = $.ajax(..) var ajax3 = $.ajax(..) $.when(ajax1, ajax2, ajax3).then(function(){ oncomplete code here... });Debe inicializar su tabla de datos utilizando datos de origen JavaScript (consulte la opción data ) DESPUÉS de que se completen sus llamadas Ajax en lugar de utilizar datos de origen Ajax directamente con la opción ajax .
Por ejemplo:
var ajax1 = $.ajax( /*...*/ ); var ajax2 = $.ajax( /*...*/ ); var ajax3 = $.ajax( /*...*/ ); // When all Ajax requests were successful $.when(ajax1, ajax2, ajax3).done(function(a1, a2, a3){ // a1, a2 and a3 are arguments resolved // for the ajax1, ajax2 and ajax3 Ajax requests, respectively. // Each argument is an array with the following structure: // [ data, statusText, jqXHR ] // Merge data from three Ajax calls var data = a1[0]._items.concat(a2[0]._items, a3[0]._items); // IMPORTANT: // Initialize data table once all Ajax requests are successful $('#example').DataTable({ data: data, // ... other options ... }); });