2012-08-06 9 views
10

tengo una llamada ajax comojQuery: carreras ajax ambos manipuladores - hecho y dejar

$.ajax({ 
     type: 'POST', 
     url: 'addVideo', 
     data: { 
      video_title: title, 
      playlist_name: playlist, 
      url: id 
      // csrfmiddlewaretoken: '{{ csrf_token }}', 
     }, 
     done: bootstrap_alert.success('video saved successfully'), 
     fail: bootstrap_alert.error('There were some errors while saving the video. Please try in a while') 
    }); 

y acciones como

// setting up alerts on action 
bootstrap_alert = function() {} 
bootstrap_alert.success = function(message) { 
    $('#feature').prepend('<div class="alert alert-success"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>'); 
} 
bootstrap_alert.error = function(message) { 
    $('#feature').prepend('<div class="alert alert-error"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>'); 
} 

Cuando el extremo delantero hace llamada AJAX, veo tanto las notificaciones en al mismo tiempo

video saved successfully 
There were some errors while saving the video. Please try in a while 

¿Es que no estoy haciendo la llamada ajax correctamente?

ACTUALIZACIÓN
cambiar done a success resultados en mismo comportamiento

// send the data to the server using .ajax() or .post() 
     $.ajax({ 
      type: 'POST', 
      url: 'addVideo', 
      data: { 
       video_title: title, 
       playlist_name: playlist, 
       url: id 
       // csrfmiddlewaretoken: '{{ csrf_token }}', 
      }, 
      success: bootstrap_alert.success('video saved successfully'), 
      fail: bootstrap_alert.error('There were some errors while saving the video. Please try in a while') 
     }); 

La respuesta del servidor es HTTP/1.0" 200 3200, creo que el fail no deben recibir la llamada

+0

¿Estás seguro de que '$ ('# feature')' no está modificado por otra parte de tu código? –

+0

Sí, no está modificado – fullstackcrash

Respuesta

15

Se espera que los valores sean funciones, callbacks. Pero, lo que estás haciendo es llamarlos de inmediato. Envuelva sus devoluciones de llamada en funciones anónimas.

$.ajax({ 
    type: 'POST', 
    url: 'addVideo', 
    data: { video_title: title, playlist_name: playlist, url: id } 
}).done(function(){ 
    bootstrap_alert.success('video saved successfully'); 
}).fail(function(){ 
    bootstrap_alert.error('There were some errors while saving the video. Please try in a while'); 
}); 
+0

esto es genial, me acabo de dar cuenta de esta solución, gracias – fullstackcrash

7

done siempre se llama. Eso se supone que debe suceder. Debería manejar su código de éxito en la propiedad success.

+2

En otras palabras, 'done' se usa cuando necesita hacer algo, ya sea que la solicitud falle o no, como eliminar un indicador de carga de la pantalla –

+0

pero no se debe invocar a' HTTP /1.0 "200 3200' respuesta, ¿no? – fullstackcrash

+0

cambiando' done' a 'success' todavía resultados en el mismo comportamiento – fullstackcrash

0

Intente reemplazar done con success y fail con error? Los está usando como opciones mientras son ganchos de devolución de llamada.

+0

Lo intenté @Jill, el mismo comportamiento que antes – fullstackcrash

1

cambiante como esto funcionó

// send the data to the server using .ajax() or .post() 
     $.ajax({ 
      type: 'POST', 
      url: 'addVideo', 
      data: { 
       video_title: title, 
       playlist_name: playlist, 
       url: id 
       // csrfmiddlewaretoken: '{{ csrf_token }}', 
      }, 
      success: function(response, textStatus, jqXHR){ 
       // log a message to the console 
       console.log("Hooray, it worked!"); 
       bootstrap_alert.success('video saved successfully'); 
      }, 

      // callback handler that will be called on error 
      error: function(jqXHR, textStatus, errorThrown){ 
       // log the error to the console 
       console.log("The following error occured: "+ textStatus, errorThrown); 
       bootstrap_alert.error('There were some errors while saving the video. Please try in a while'); 
      }, 
     }); 
2

Es necesario envolverlo en una función anónima (como han dicho otros). Pero, no he visto a nadie mencionar por qué (lo que creo que vale la pena mencionar).

La razón por la que necesita hacer esto es porque javascript asigna la evaluación del lado derecho del colon al lado izquierdo. Para evaluar el lado derecho, primero debe ejecutar su función. Sin embargo, si tiene una función anónima en el lado derecho, define la función en sí misma como el valor de la referencia en el lado izquierdo (en JavaScript el valor de una variable puede ser una función) y asigna la función como está a la izquierda lado (que ahora es una referencia a la función). Por lo tanto, retrasa la evaluación (ejecuta la función) hasta que finalice su llamada ajax.