JQuery Hashexchange (BBQ, Ben Alman) Plugin

JavaScript
1

Having real difficulty implementing this code into my current AJAX script. My AJAX pulls content from an external .html file (content.html) and loads it into a target div onto a number of pages of mine. The hashexchange plugin is a way to implement a pageshow event (i believe) so that the website can be hotlinked and all back/refresh capability can be used regarding the content loaded into my target div.

My ORIGINAL code before adding the pageshow event lines was:

$(document).ready(function(){
$(document).on('click', '#about2', function() {
	$("#content").load("content.html #about", function() {
	$.getScript("slides.js", function() {
	$(window).scrollTop(0);
	});
	});
});

$(document).on('click', '#process2', function() {
    $("#content").load("content.html #process", function() {
    $(window).scrollTop(0);
    });
});

$(document).on('click', '#materials2', function() {
    $("#content").load("content.html #materials", function() {
    $(window).scrollTop(0);
    });
});

$(document).on('click', '#pricing2', function() {
    $("#content").load("content.html #pricing", function() {
    $.getScript("tabbedcontent.js", function() {
	$(window).scrollTop(0);
	});
	});
});

This worked fine in terms of the .load function, it even worked in terms of adding an anchor to the web address after clicking the link (i.e: http://crookedcartoon.co.uk/print.html#process) however, these anchors are not hotlinkable, refreshable or are usable with any browser functions. So i updated my code to encompass a bit of what the Ben Alman plugin uses:

$(document).ready(function(){
$(document).on('click', '#about2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#about':
            $("#content").load("content.html #about", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#process2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #process", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#materials2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #materials", function() {
                $(window).scrollTop(0);
            });
            break;

$(document).on('click', '#pricing2',function ParseURL() {
    switch(location.hash.split("&")[0]) {
        case '#process':
            $("#content").load("content.html #pricing", function() {
                $(window).scrollTop(0);
            });
            break;

         default:
    }
}

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        ParseURL();
    }
});

$(document).ready(function ($) {
    ParseURL();
});

It still doesn’t work, and the original AJAX function no longer works either, can anyone see where im going wrong? My site is www.crookedcartoon.co.uk/print.html

Thanks in advance!

2

Perhaps JSHint doesn’t recognize some of the plugin coding, but for starters you have 19 warnings according to JSHint.

3

I have got it working… slightly after looking over the console but now I have one .js file for the actual .load function and one for the pageshow event, i’d like to merge these 2 files together. just not sure how.

But the main problem is that the pageshow even only allows hotlinking and refresh NOT back or other browser functions.

My AJAX code is:

$(document).ready(function(){
$(document).on('click', '#about2', function() {
    $("#content").load("content.html #about", function() {
    $.getScript("slides.js", function() {
    $(window).scrollTop(0);
    });
    });
});

$(document).on('click', '#process2', function() {
    $("#content").load("content.html #process", function() {
    $(window).scrollTop(0);
    });
});

$(document).on('click', '#materials2', function() {
    $("#content").load("content.html #materials", function() {
    $(window).scrollTop(0);
    });
});

$(document).on('click', '#pricing2', function() {
    $("#content").load("content.html #pricing", function() {
    $.getScript("tabbedcontent.js", function() {
    $(window).scrollTop(0);
    });
    });
});

My Pageshow event code is (Someone helped me A LOT with this code)

function ParseURL() {

    switch(location.hash.split("&")[0]) {
        case '#materials':
            $("#content").load("content.html #materials", function() {
                $(window).scrollTop(0);
            });
            break;
        case '#process':
            $("#content").load("content.html #process", function() {
                $(window).scrollTop(0);
            });
            break;
        case '#materials':
            $("#content").load("content.html #materials", function() {
                $(window).scrollTop(0);
            });
            break;
        case '#pricing':
            $("#content").load("content.html #pricing", function() {
                $(window).scrollTop(0);
            });
            break;
      default:
    }
}

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        ParseURL();
    }
});


$(document).ready(function ($) {
    ParseURL();
});

So as well as getting it back/forward compatible, i’d like to merge these 2 codes into one file with a paragraph per link, since there are a lot of links, i don’t want to have to write 2 blocks of code in 2 different files per link i add.

Thanks in advance, i hope all these questions/answers will help someone stuck in my predicament in the future.