[SOLVED] jQuery History - Very buggy, and not sure why.

[mattal999]

Hi guys,

 

Haven't posted in the Ajax forum before (I don't think), so here goes.

 

I have a website, iMuzic, in which I use jQuery to load the relevant content (via ajax) in order to keep the MP3 player always there. Now, I had it all set up using click="" events to load each page. This worked fine, but you could not click the Back button on your browser to navigate back. I didn't want this. I then discovered the jQuery History Plugin, which seemed to be my holy grail.

 

I set it all up on the site, but it was a real struggle. I have the callback function like so:

 

function pageCallback(url) {
    url = url.replace(/\s/g, '+');
    document.getElementById("content").innerHTML = "<img src=\"images/loading.gif\" border=\"0\">";
    var current = document.location.href;
    var currentindex = current.indexOf("#/");
    if(navigator.userAgent == "iMuzic Debug Me") { alert(url); }
    if (currentindex == -1) {
        $("#content").load("files/search.php");
    } else {
        var newstring = current.substring(currentindex + 2);
        var splitstring = newstring.split("/");
        var page = splitstring[0];
        var vars = splitstring[1];
        if (page == "search") {
            $("#content").load("files/" + page + ".php?q=" + vars + "&page=" + splitstring[2]);
        } else if (page == "more") {
            $("#content").load("files/" + page + ".php?id=" + vars + "&page=" + splitstring[2]);
        } else if (page == "playlists") {
            if (vars == "retrieve") {
                $("#content").load("files/" + page + ".php?retrieve=true");
            } else if (vars == "create") {
                $("#content").load("files/" + page + ".php?create=true");
            } else if (vars == "remove") {
                $("#content").load("files/" + page + ".php?remove=" + splitstring[2]);
            } else {
                $("#content").load("files/" + page + ".php?id=" + vars);
            }
        } else {
            $("#content").load("files/" + page + ".php");
        }
    }
}

 

And the code to make all links call the history plugin:

 

$(document).ready(function() {
    $.history.init(pageCallback);
    $("a[href*='#/']").click(function() {
        $.history.load(this.href.replace(/^.*#/, ''));
        return false;
    });
});

 

But the output is rather strange. It seemed to work fine for a little while, but then started loading the same page twice and "lagging" behind 1 page. For example, you navigate to page2, page 2 loads. You then click back to page 1, but page 2 loaded. Then you click page 3, and page 1 loaded. Etc.

 

Test it yourself. The only solution is to have an alert box popup (have a look at the code) when the function is called. With this, it works perfectly. (To make it display, set your useragent to "iMuzic Debug Me" - Google changing your useragent).

 

Thanks

[mattal999]

Heh. Turns out I didn't need to tie the links to the plugin. Not quite sure how it works, but it does!

 

Topic solved.