Question

ive searched around but couldnt really find anything to help. I use this code as a main ajax call for all content on my site (All content loaded dynamically into a div using this script):

jQuery(document).ready(function($) {
        function load(num) {
            $('#pageContent').html('<img src="imgs/ajax-loader.gif">') 
            $('#pageContent').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#bbon a').live('click', function(e) {
                var url = $(this).attr('href');
                URLDecoder.decode(location,"UTF-8");
                url = url.replace(/^.*#/, '');
                $.history.load(url);

                return false;
            });
    });

which works great. its fantastic. however, i am unable to get default content displayed in the <div> on page load.. so a visitor would have to select a menu item before any content shows. Any ideas on how i could do this?

At the minute all i see is my loading animation.. I use jQuery with the History plugin.

Answer 1

Can’t you just set a default num and load it when your DOM is ready?

var defaultnum = 1; //for example
jQuery(document).ready(function($) {
    function load(num) {
        $('#pageContent').html('<img src="imgs/ajax-loader.gif">') 
        $('#pageContent').load(num +".html");
    }

    $.history.init(function(url) {
            load(url == "" ? "1" : url);
        });

    $('#bbon a').live('click', function(e) {
            var url = $(this).attr('href');
            URLDecoder.decode(location,"UTF-8");
            url = url.replace(/^.*#/, '');
            $.history.load(url);

            return false;
        });

    load(defaultnum); //just load it
});