Multiple issues with pushstate: history, loading, calling functions

I have a script that is currently pulling data via ajax/pushstate; it works relatively well, but there are certainly some issues I’m running into. First and foremost, here is the code that I’m currently using:

function goTo(href) {
    $.ajax({
        url: href,
        success: function(data) {
            $('#wrapper').fadeOut('fast', function(){

                $(this).html(data).fadeTo('fast', 1);

        $(".scroll").niceScroll({cursorcolor:"#f33d39", cursorwidth: "10px", cursorborder: "none", cursorborderradius: "0px", fixed: true});



            });
            // update the page title
            var title = $('#page-right').find('h1').text();
            $('head').find('title').text(title);
        }
    });
}

if (typeof history.pushState !== "undefined") {
    var historyCount = 0;

    $('a[href*="rage.rage-wrestling.com"]').live('click',function(){
        var href = $(this).attr('href');
    $('#page-load').fadeIn( 'slow' );
        goTo(href);     
    $('#page-load').delay(2000).fadeOut( 'slow' );
        history.pushState(null, null, href);
        return false;
    });

    window.onpopstate = function(){
        if(historyCount) {
            goTo(document.location);
        }
        historyCount = historyCount+1;
    };
}

Now, the code pulls the data I need and displays it but I’m running into several issues that I’ve attempted to problem solve to no avail. They are as follows:

Read More
  1. The back button does not work on the browser.

  2. The title to the pages is always one page behind; i.e. if I’m on a page called Cain and click a link to go to Other, when the page loads for Other it displays the title of the page on the browser as Cain. It seems to lapse. It’s strange.

  3. I can’t seem to find a good way to call the function ragecharts(); in this; I’ve put it after the ajax load where I have nicescroll refiring in order to work, but that only breaks the code. I’ve tried in the popstate function as well, but that too does not work. I need to be able to re-call this function because when data is loaded into a page and that function is being used, it doesn’t display the data correctly.

  4. The loading function; I’ve jerry rigged it, so to speak, by having the #page-load div called up before the ajax is pulled as an overlay and set a delay afterwards, but what I really want is for the overlay only to fade out once ALL OF THE DATA has loaded inside the ajax call. There are a lot of images that still need to be loaded by the time the overlay fades back out and I want it to stay until it’s fully loaded.

That’s pretty much it.

I’ve trouble shot this as much as I feasibly could, but I’m only a novice when it comes to this stuff so maybe there’s something I’m not seeing correctly.

Thanks in advance if you’re able to assist.

Related posts

Leave a Reply