Jquery Ajax вызывает историю HTML5 и кнопку «Назад»

Я много читал об этом и чувствую, что, хотя я понимаю все части, я не могу понять, как собрать все это вместе, не переделывая свой проект. У меня настроен ajax, и он отлично работает на моем сайте. Мне удалось добавить # в URL-адрес при появлении нового контента. Кнопка «Назад» работает и проходит через все правильные URL-адреса без перезагрузки страницы, но ajax не обновляется.

Это мой HTML для кнопок:

<a class="portfolioThumbnail" onclick="return false;" data-name="myPage" href="myPage.html">

    <img src="imagepath" />

</a>    <!-- portfolioThumbnail -->

и вот мой Jquery:

$('.portfolioThumbnail').on('click', function(){

 var thisProject =  $(this).attr('href')

$.ajax('http://oursite.com/' + thisProject, {
  success: function(response) {
    $('.projectWrapperReplace').html(response);
  },
  error: function() {

      alert('error');
  },
  timeout: 5500,
  beforeSend: function() {

    $(this).find('.portfolioThumbnail').addClass('loading');

  },
  complete: function() {


    $(".blurable").addClass('blur');

    $(".blurable").addClass('whiteOut');



    $('.projectWrapper').fadeIn('slow', function(){

        $('.projectWrapper').addClass('noBlur');

        window.location.hash = thisProject;


    });

  }

}); 

 });

У меня также есть div с именем projectWrapperReplace в моем HTML. Ищу, может ли кто-нибудь помочь мне заставить это работать. Спасибо


javascript html jquery ajax html5-history
person Ryan Swanson    schedule 15.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужен прослушиватель событий, когда нажимаются кнопки «Назад» или «Вперед» (сейчас вы загружаете содержимое ajax только при нажатии кнопок .portfolioThumbnail).

Сделайте классы загрузки и состояния ajax отдельной функцией, скажем, hashChange()

Оформить onhashchange

//call hashChange on window hash chage
window.onhashchange = hashChange;
//and also on buttonclick
$('.portfolioThumbnail').on('click', function() {
    hashChange();
})
person Michael Tallino    schedule 15.05.2017