jquery .load() with back/forward button without hash

user_1411536 0
Viewed 138

I am using a jQuery script I wrote to load content on my site without refreshing the page, and everything works fine except the back/forward buttons. I am using hash links and loading in my php files based on that.

....
<li><a id="theShopLink" class="theMainLinks" href="#shopFrame">SHOP</a>

....
$('.theMainLinks').click(function() {
    var dest = $(this).prop("hash").substring(1);
    $('.theMainLinks').removeClass('active');
    $(this).addClass('active');


    if ($('#fullFrame > div').is(':visible')) {
        $('#homeFrame').addClass('animated fadeOutLeft');
        $('#homeFrame').html('');
    }
    console.log(dest);
    $("<style>html { background: #000; }</style>").appendTo("head");
    $('#nextFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/' + dest + '.php');
});

I tried searching and found some examples using html5 window.history.pushState(); but I'm not sure how to work that with my current code without having to rewrite the script. Also the # in the urls look ugly, anyway around this?

I'm not looking to use any kind of plugins/dependencies besides jQuery, and if possible the cleanest/simplest code. Please explain so I can understand because I will need to do something similar with my sub navigation links within the frames and will reuse the function.

UPDATE

On initial website load or refresh, I use the following function to determine what content to load. -

$(function() {
    if (window.location.hash) {
        var target = window.location.hash.substring(1);
        var hash = window.location.hash;
if (hash.toLowerCase().indexOf("frame") >= 0) {

            $('#homeFrame').html('');
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/' + target + '.php');
        } else if (hash.toLowerCase().indexOf("shop-") >= 0) {

            $('#homeFrame').html('');
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/shopFrame.php');

        } else if (hash.toLowerCase().indexOf("news-") >= 0) {

......etc......

 } else if (hash.toLowerCase().indexOf("/") >= 0) {

            var newTar = target.split('/');

            $('#homeFrame').html('');
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/general/' + newTar + ' #patchnotesMain');


        } else {
            // Fragment doesn't exist
            $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/' + target + ' #newContent');
        }

    } else {
        $('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/homeFrame.php');
    }
});
html5-history html jquery ajax javascript
2 Answers

With window.history.pushState() I think you can obtain the desired result without rewriting your script and without using hash. You could try something similar to:

function handleState(state) {
  // here the code you need to change the page
  // more or less the body of $('.theMainLinks').click(function() {})
  // in your question code
}

$('.theMainLinks').click(function(event) {
  event.preventDefault();
  const state = {/* here setup the state for next step */}; 
  handleState(state);
  window.history.pushState(state);
});

$(window).on("popstate", function(event) {
  handleState(event.originalEvent.state);
});

Hope this helps.

user_46909460

In my opinion, # is usually used in detect anchor in the page (jump to anywhere in page) and not the way to change which page to load, the reason is it's very hard to detect and process the url. I suggest you could use ? for query url instead of using #. Simple example url can be like this: www.yoururl.com/index.php?page=frame.

For changing url and pushing state of page to history of browser. You can use the below function to change url

function change_url(title, html, urlPath){
     document.title = title;
     window.history.pushState({"html":html,"title":title},"", urlPath);
}

After change url, use your code to render new html

$('#homeFrame').html('');
$('#homeFrame').html('<div id="loading"><img id="loading-image" src="/wp-content/uploads/assets/loader.gif" alt="Loading..." /></div>').load('/frames/' + target + '.php');

To detect event back/forward button, you can use window.onpopstate = function(e){ ... }. This time, your page has all of data that you've just pushed to history, now you can get the data out easily and assign it to html

window.onpopstate = function(e){
    if(e.state){ // if state's data is existed
        $('#homeFrame').html('');
        $('#homeFrame').html(e.state.html);
        document.title = e.state.title;
    }
};

Please correct me if I were wrong. Hope this would help

user_71880720
Related