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:
-
The back button does not work on the browser.
-
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.
-
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.
-
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.