AJAX request to load a new page?

Question

AJAX

Task: click to follow the link without reloading
Problem: nothing works, am I doing everything right?

$(function() {
    $('#detoxNav').on('click', function(event) {
        event.preventDefault();
        window.location = '/detox.html';
    });
});

Answer 1

Below is an example of a function for loading pages via AJAX, without reloading the page:

async function pageUpdate(event) {
  
  // Если функция вызвана без аргументов:
  
  if (typeof event == 'undefined') {
    
    // Устанавливаем обработчики
    // на все ссылки на странице:
    
    $('a[href]').click(pageUpdate);
    
  }
  
  // Если функция вызвана
  // в результате клика
  // по ссылке:
  
  else {
    
    // Берём адрес с нажатой ссылки
    // и записываем в переменную link:
    
    var link = event.target.href;
    
    // Если ссылка ведет на наш сайт:
    
    if (link.includes(location.host)) {
      
      // Предотвращаем переход:
      
      event.preventDefault();
      
      // Блокируем страницу, чтобы
      // больше нельзя было кликать:
      $('body').css('pointer-events', 'none');
      
      // Активируем анимацию
      // постепенного исчезновения
      
      await $('body').animate({ opacity: 0 }, 1000).promise();
      
      // Грузим новую страницу AJAX-ом без
      // фактической перезагрузки текущей:
      
      var html = await $.ajax(link);
      var doc = new DOMParser().parseFromString(html, 'text/html');
      var html = $('body', doc).html();
      history.pushState(null, null, link);
      $('body').html(html);
      
      // Заново ставим
      // обработчики:
      
      pageUpdate();
      
      // Активируем анимацию
      // постепенного появления:
      
      await $('body').animate({ opacity: 1 }, 1000).promise();
      
      // Снимаем блокировку с документа:
      
      $('body').css('pointer-events', '');
      
    }
    
  }
  
}

pageUpdate();

The function intercepts clicks on links, adds animation and updates page content without reloading.