Necesito hacer una llamada del lado del servidor cuando un usuario hace algo en el DOM (haga clic en una casilla de verificación, seleccione un menú desplegable, etc. Esta es la serie de eventos:
El problema que tengo es que 4 y 5 a menudo se invierten, y la rueda giratoria se desvanece a veces 2 o 3 segundos antes de que se actualice la etiqueta.
Estoy tratando de usar .when() para asegurarme de que esto no suceda, pero parece que no lo estoy haciendo bien. He estado mirando este hilo , y este, y la propia documentación de jquery .
Aquí es donde estoy ahora mismo...
function UpdateCampaign() { $('#overlay').fadeIn(); $.when(SaveCampaign()).done(function () { $('#overlay').fadeOut(); }); } function SaveCampaign() { var formData = .... // get some data $.ajax({ url: '/xxxx/xxxx/SaveCampaign', type: 'GET', dataType: 'json', data: { FormData: formData }, success: function (data) { var obj = $.parseJSON(data); .... // update a label, set some hidden inputs, etc. }, error: function (e) { console.log(e) } }); }Todo funciona correctamente. Se ejecuta el método del lado del servidor, se devuelve y analiza el JSON correcto, y la etiqueta se actualiza como se esperaba.
Solo necesito que esa maldita rueda giratoria espere y desaparezca hasta DESPUÉS de que se actualice la etiqueta.
El problema es que no le estás dando una promesa a $.when() . De hecho, le estás dando null para que se ejecute de inmediato. Puede resolver esto devolviendo la promesa que proporciona $.ajax desde su función SaveCampaign() de esta manera:
function SaveCampaign() { var formData = // get some data return $.ajax({ // < note the 'return' here url: '/xxxx/xxxx/SaveCampaign', type: 'GET', dataType: 'json', data: { FormData: formData }, success: function (data) { var obj = $.parseJSON(data); // update a label, set some hidden inputs, etc. }, error: function (e) { console.log(e) } }); }Sé que ya lo respondió Rory. Pero aquí está el método de la promesa mía, siempre funciona bien y en lugar de usar el éxito y el error, usa hecho y falla.
var jqXhr = $.ajax({ url: "/someurl", method: "GET", data: { a: "a" }); //Promise method can be used to bind multiple callbacks if (someConditionIstrue) { jqXhr .done(function(data) { console.log('when condition is true', data); }) .fail(function(xhr) { console.log('error callback for true condition', xhr); }); } else { jqXhr.done(function(data){ console.log('when condition is false', data); }) .fail(function(xhr) { console.log('error callback for false condition', xhr); }); }O si quiero una devolución de llamada común que no sea condicional, puedo enlazar directamente en la variable jqXhr fuera del bloque if-else.
var jqXhr = $.ajax({ url: "/someurl", method: "GET", data: { a: "a" }); jqXhr .done(function(data) { console.log('common callback', data); }) .fail(function(xhr) { console.log('error common back', xhr); });