CODEWITHSUNDEEP
jquerywordpresspagination
Carpy
Carpy

Reputation: 1074

Wordpress ajax pagination

I'm using this piece of code i found from a tutorial to enable Ajax pagination on my wordpress site. It all works find but i'd like to enhance it slightly.

At the moment when you click the next page button there is a slight pause where nothing happens. I'd like to display one of the "waiting" type images like this (http://www.costacruises.co.uk/B2C/Images/Skin/Default/gfx/ico_waiting.gif) but unsure of how i'd do this.

Heres the code i'm using.

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#content-inner').fadeOut(500).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500); });
});

Thanks

Upvotes: 2

Views: 2235

Answers (1)

bhamrick
bhamrick

Reputation: 386

You need to create the "loading" element, position it correctly with CSS and set to display:none. jQuery's fadeOut and fadeIn functions support specification of callbacks, so you would change the above code to something more like this

jQuery('#postPagination a').live('click', function(e){
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#content-inner').fadeOut(500, function(){
            jQuery("#spinner").show();
    }).load(link + ' #content-inner', function(){ jQuery('#content-inner').fadeIn(500, function(){
            jQuery("#spinner").hide();
    }); });
});

changing "#spinner" to the id or class of your loading element.

Upvotes: 1

Related Questions