Estoy usando este tipo de envió de datos a través de jQuery.post, ¿En que lugar coloco una imagen de loading... o algún mensaje mientras devuelve algo la función?
$.post( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
});
Es truco esta en usar ajaxStart y ajaxStop.
Estos eventos son invocados por jQuery cada vez que comienza/termina una solicitud ajax. Ya sea que se hagan por los métodos post
, ajax
, load
, ..
Es muy util pues si hay varias solicitudes ajax en paralelo, el evento ajaxStop
es invocado cuando termina la ultima solicitud . Y el evento ajaxStart
no se repite si ya hay una solicitud en progreso.
$(function() {
// tu elemento que quieres activar.
var cargando = $("#cargando");
// evento ajax start
$(document).ajaxStart(function() {
cargando.show();
});
// evento ajax stop
$(document).ajaxStop(function() {
cargando.hide();
});
// cualquier llamada ajax
$.post("ajax/test.html", function(data) {
$(".result").html(data);
});
});
En el script que planteas la función es un callback y se ejecuta cuando suceda un evento (en este caso que el post termine), como vos lo querés hacer en ese momento alcanza con actuar fuera del callback.
$.post("ajax/test.html", function(data) {
$(".result").html(data); // esto se ejecuta cuando el post termine
});
$(".result").html('loading'); // esto se ejecuta después de hacer el post
Si lo que necesitas es hacer esto para cualquier AJAX la respuesta de @rnd es mejor.