Почему при изменение классов не меняется страница в браузере?

Question

[Руслан Абсалямов]

$('#form-message-services').submit(function (e) {
		e.preventDefault();

		var form = $(this);
		var data = new FormData(this);
		var spiner = $('.fa-spinner');
		var button = $('.send-button');

		if ($('.textarea').val().length > 0) {
			preloader(spiner, button);
			$.ajax({
				url: form.attr('action'),
				method: form.attr('method'),
				data: data,
				async: false,
				cache: false,
				contentType: false,
				processData: false,
				success: function(data) {
					var div = $('.cnt');
					div.html(data);
					div.scrollTop(div.prop('scrollHeight'));
					$('.file-upload').html('');
					form[0].reset();
					$('#submit-button').toggleClass('hide');
				},
			});

			preloader(spiner, button);
		}
	});

	function preloader(spiner, button) {
        spiner.toggleClass('hide');
        button.toggleClass('hide');
    }

У меня даннеый код, если смотреть на html в браузере то все меняется, но в браузере оно почему-то не отображает спиннер, во время ajax запроса могут быть много файлов или просто тяжеловесый, то никакой отзывчивости кнопки нет, то есть она не меняется в браузере как была так осталось. Но в html все нормально отрабатывает. Подскажите в чем может быть дело?

Comments

[Руслан Абсалямов]

Артём Рыженький, нет не помогает. Самый лучший способ где отрабатывает это

$('#form-message-services').submit(function (e) {
		e.preventDefault();

		var form = $(this);
		var data = new FormData(this);
		var spiner = $('.fa-spinner');
		var button = $('.send-button');

		if ($('.textarea').val().length > 0) {
			preloader(spiner, button);
			$.ajax({
				url: form.attr('action'),
				method: form.attr('method'),
				data: data,
				async: false,
				cache: false,
				contentType: false,
				processData: false,
				success: function(data) {
					var div = $('.cnt');
					div.html(data);
					div.scrollTop(div.prop('scrollHeight'));
					$('.file-upload').html('');
					form[0].reset();
				},
			});

			setTimeout(function () {
				preloader(spiner, button);
			}, 500);
		}
	});

Но она сработает после ajax отправки всего. Во время ajax отправки не получается чтобы спиннер отработал и встал на место

[Руслан Абсалямов]

Артём Рыженький, а в чем отличии? так не может обратиться к форме и отпрляет как обычный post запрос. то есть не ajax

Answer 1

[elhini]

Вам нужно вызывать preloader второй раз не сразу после $.ajax, а внутри его колбэка success - чтобы дождаться ответа и скрыть спиннер только по окончании асинхронного вызова.