Евгений Карнаухов

<script>
$(function() {
	
	// Ссылка на форму которую надо грузить без перезагрузки страницы:
	var form = $('form[action="https://dev.itlvl.com/nashi-raboty/"]');
	
	// Вешаем на поля формы обработчик кликов:
	
	form.find('input[type="radio"]').click(async function(e) {
		
		e.preventDefault(); // Предотвращаем клик
		form.css('pointer-events', 'none'); // Блокрируем повторные клики
		
		// Формируем ссылку на страницу которая содержит данные кликнутого таба:
		var link = 'https://dev.itlvl.com/nashi-raboty/?' + $(this).attr('name') + '=' + $(this).val();
		
		var request = $.ajax(link); // Запускаем процесс загрузкки этой страницы
		
		// Пока грузится, делаем плавное исчезновение текущего таба:
		await $('.grid-listing').animate({ opacity: 0 }, 500).promise();
		
		// Получаем те данные что загрузили и меняем URL в браузере:
		var html = await request; history.pushState(null, null, link);
		
		// Удаляем атрибут активности со всех полей:
		form.find('input[type="radio"]').removeAttr('checked');
		
		$(this).attr('checked', 'checked'); // Делаем активным текущий таб
		
		// Вставляем данные с нового таба на текущую страницу:
		
		var doc = new DOMParser().parseFromString(html, 'text/html');
		
		var html = $('.grid-listing', doc).html();
		$('.grid-listing').html(html);
		
		var html = $('.listing-page__pagination', doc).html();
		$('.listing-page__pagination').html(html);
		
		// Делаем плавное появление для вставленного контента:
		await $('.grid-listing').animate({ opacity: 1 }, 500).promise();
		
		form.css('pointer-events', ''); // Снимаем блокировку кликов
		
	});
	
});
</script>