Update WordPress Posts Without Page Refresh

I recently had to write-up some code to refresh the WordPress posts of a website without a page reload. So the idea is that a user clicks a button and all the posts below it reload automatically without a page refresh making the user experience much more polished and engaging.

There are a whole variety of Plugins for WordPress that will Ajaxify your WordPress site but that for me is like shooting a fly with a howitzer. I want the KISS method wherever possible and you should as much as possible avoid using plugins as they can slow down your WordPress site dramatically.

Frankly in this scenario there is no reason to use a plugin since implementation of refreshing WordPress posts can be done very easily with jQuery.

In this particular scenario what we are dealing with is tabbed content and each tab is representing a different set of content. So when ‘latest news’ is clicked it loads latest news, TV news loads television news,, Movie News and Hot Stories all need to do the same thing. ( illustration below )

Using a bit of jQuery we can achieve the reload effect efficiently and in only a few lines of code. Within the screen above I have a DIV placeholder identified with the id “loader”. All my jQuery is going to do is find that DIV placeholder and reload its contents with an external file called ‘news.php’.

The entire code snippet is as follows;


jQuery("#loader").load("/news.php");
jQuery("#loadtv").click(function()
{
     event.preventDefault();
     jQuery("#loader").load("/tvnews.php");
     setTimeout(addcss,1000);
});

Lets break down exactly what this code is doing. The first line is quite simple. As soon as the webpage is loaded I am finding the DIV on the webpage called ‘loader’ and I am loading into it the latest news from my external file called ‘news.php’ News.php is a file in the root folder of my site which contains a WordPress loop that would looks like so;

require('/wp-blog-header.php');
query_posts("showposts=16");
while (have_posts()) : the_post(); ?-->
<a href="<? the_permalink(); ?>"><!--? the_title(); ?--></a>

As soon as a user clicks on that TV news tab my jQuery function captures the click and replaces the ‘loader’ div with new content, this time TV news content.

Within this code you will notice I have event.preventDefault(); this code is simply there to prevent the page from trying to reload since the user is clicking on am HREF link but I don’t want to load the page I only want to load my jQuery TV news function.

Also you should note that when you replace the contents of a DIV with new content you may break other jQuery functions associated with it.  In my case the image you see is also a left to right slider and by replacing the div content it broke the jQuery slider code associated with it. So I had to reapply some CSS settings to the new ‘reloaded’ DIV content as well as reinitialize the carousel query so my code looked like this;

event.preventDefault();
jQuery("#loader").load("/tvnews.php?");
setTimeout(addcss,1000);
initCarousel();
initNav();

jQuery may not be the solution to all problems but it can certainly solve alot of them. This post is not intended to be a step by step how to it is only intended to inspire you like it has me. My final iteration of the code above is much more complex including tracking event clicks with Google Analytics and a jQuery animation effect as it transitions between TV News, Movie News, etc.

Advertisements

2 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s