Search code examples
jqueryajaxloader

jQuery Page Loader Problem


I'm using the following code to load the pages dynamically with jQuery. The page loading works, but when you click the nav link to load a new page the old page flashes on the screen as if it's loading the previous page again. Click on the "Contact" nav link and see what I mean: http://ghostpool.com/wordpress/buzz. Why is this happening?

jQuery(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = jQuery('#nav li a').each(function(){
    var href = jQuery(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        jQuery('#content').load(toLoad)
    }                                           
});

jQuery('#nav li a').click(function(){

    var toLoad = jQuery(this).attr('href')+' #content';
    jQuery('#content').hide('fast',loadContent);
    jQuery('#load').remove();
    jQuery('#page-wrapper').append('<span id="load">LOADING...</span>');
    jQuery('#load').fadeIn('normal');
    window.location.hash = jQuery(this).attr('href').substr(0,jQuery(this).attr('href').length-5);
    function loadContent() {
        jQuery('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        jQuery('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        jQuery('#load').fadeOut('normal');
    }
    return false;

});

});


Solution

  • The default behaviour is still running. you have to disable it using one of these ways:

    jQuery('#nav li a').click(function(e){
    
    e.preventDefault();
    
    // or 
    
    return false;// at the end of the function
    }
    

    EDIT:

    After re-reading your code i see unusual stuff here wit your functions:

    function loadContent() {
        jQuery('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        jQuery('#content').show('normal',hideLoader());
    }
    

    instead of passing the callback functions you are passing the return value. here is how it should be

    jQuery('#content').load(toLoad,'',showNewContent);
    ...
    jQuery('#content').show('normal',hideLoader);
    

    not the parentheses are removed