Как сделать прелодер при отправке формы?

Question

[Никита Гревцов]

Здравствуйте!

Использую следующий скрипт для отправки формы

$("#listening, #faq").submit(function() { 
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "mail.php", 
			data: th.serialize()
		}).done(function() {
			alert("Thank you!");
			setTimeout(function() {
				// Done Functions
				th.trigger("reset");
			}, 1000);
		});
		return false;
	});

Подскажите пожалуйста, как сделать небольшой прелодер рядом с кнопкой, чтобы он крутился до отправки, а после отправки появлялось сообщение (только не alert'ом, а тоже рядом с кнопкой). Сообщение, я думаю, можно заранее сделать, и после отправки просто убирать класс .hidden, а вот с прелодером не знаю как быть, в JS пока не силен :)

Answer 1

[DenJel]

в объекте с опциями есть настройка beforeSend передаете туда функцию, она выполняется перед отправкой данных,
и есть настройка dataFilter она выполняется после прибытия данных, там выполняете обратные действия, ну или в done пихаете или в sucess
Что-то типо:

$.ajax({
  beforeSend: function() { показать прелоадер },
  dataFilter: function() { спрятать прелоадер }
})

Comments

[Денис]

Только логичней не dataFilter, а complete, т.к. dataFilter предназначен для других целей.

[DenJel]

Денис: да без разницы, первый коллбек в доке нашел и написал, да можно в комплит

[Денис]

DenJel: без разницы с точки зрения результата, но в моём комментарии ключевое слово: "логичней". Как бы за семантику боремся... )

[Никита Гревцов]

Всем большое спасибо, все заработало)