Bulding Single Page Application with jQuery

php dev.to
$(document).ready(function() {
 ajax_clicks();
});

function ajax_clicks() {
 $('a.home_ajax_link').click(function() {
  var url = '/'+$(this).attr('href'),
      page = $(this).attr('page');

  $.ajax({
   url: url,
   dataType: 'json'
  }).done(data) {
   $('body').attr('page', 'body-'+.event.state.page');
   $('title').text(data.title);
   $('.ajax_container').html(data.html);
   history.pushState({ page: page, title: data.title, html: data.html }, "", "/home");
  });
 });
}

window.onpopstate = function(event) {
 $('body').attr('page', 'body-'+.event.state.page');
 $('.ajax_container').html(event.state.html);
 document.title = event.state.title;
}

Enter fullscreen mode Exit fullscreen mode

In similar way I coded my SPA-Cart:

https://spa-cart.com/

Source: dev.to

arrow_back Back to Tutorials