loading bar.js

loadingbar.js

//from https://github.com/peachananr/loading-bar
//I have recoded it a bit since uses a loop each, which is not convenient for me at all
$(function(){
    $("a.ajax-load").click(function(e){
        e.preventDefault(); 
        button = $(this);
        //get the link location that was clicked
        pageurl = button.attr('href');

        //to get the ajax content and display in div with id 'content'
        $.ajax({
            url:pageurl+'?rel=ajax',//this will be passed to the URL to return a minimal view, feel free to detect if its an ajax request or to change the param name
            beforeSend: function() {
                                        if ($("#loadingbar").length === 0) {
                                            $("body").append("<div id='loadingbar'></div>")
                                            $("#loadingbar").addClass("waiting").append($("<dt/><dd/>"));
                                            $("#loadingbar").width((50 + Math.random() * 30) + "%");
                                        }
                                    }
                                    }).always(function() {
                                        $("#loadingbar").width("101%").delay(200).fadeOut(400, function() {
                                        $(this).remove();});
                                    }).done(function(data) {
                                        document.title = button.attr('title');
                                        if ( history.replaceState ) history.pushState( {}, document.title, pageurl );
                                        $('a.ajax-load').removeClass('active');
                                        button.addClass('active');
                                        $("#content").html(data);});

        return false;  
    });
    
});

/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
    $.ajax({url:location.pathname+'?rel=ajax',success: function(data){
        $('#content').html(data);
    }});
});