How to incorporate working back/forward buttons? (ajax, history.js)

Hi

I have “ajaxified” a wordpress theme and this is my jQuery:

$('body').on('click', 'a', function(e) {

	e.preventDefault();

    link = $(this);

    url = link.attr('href');

    $.ajax({
        url: ajaxify.ajaxurl,
        type: "post",
        data: {
            action: 'ajax_submit',
            url: url
        },
        dataType: "html",
        beforeSend: function(){
   
           // stuff

        },
        success: function(data){

            var content = $('.page-in .content-wrapper');

            content.html(data);

            // animations....

        }

    if(history.pushState) {
        history.pushState({}, '', url);
    }
    return false;
    });

With this things are working fine except back and forward buttons, anyone know how to incorporate that in my code? I have googled but so far havn’t been successfull in getting this working.

Hi there,

The simple answer is to use pjax which accomplishes what you’re wanting to do.

If you want to do things manually though you’ll need to cache all of the content in an array or hash and load that content back when the history changes onpopstate https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.