AJAX load Wordpress Content
Question
I have been following an AJAX tutorial to try and load my wordpress post content onto the homepage of my website without having the page reload.
I am not sure why, but when the links are clicked it is still navigating to the page rather than loading the content into the div I specified. Anyway, it is all a bit too much for me and I would love some guidance!
The tutorial link I have been following is - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
My live website is - http://www.mathewhood.com
My current code is -
nb For those of you not familiar with wordpress, it has a header.php, template.php and footer.php. Each template file calls the header and the footer as to avoid duplication of code. I will link them all though. I have also included the single_portfolio page, which is where the page would normally go to.
ajax.js
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('.caption a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#.caption a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#theContainer').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#theContainer').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#theContainer').fadeOut('normal');
}
return false;
});
});
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?> | <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/ajax.js"></script>
<script>
$(document).ready(function() {
//move the image in pixel
var move = 8;
//zoom percentage, 1.2 =120%
var zoom = 1;
//On mouse over those thumbnail
$('.recentPost').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.recentPost').width() * zoom;
height = $('.recentPost').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height<?php /*?>, 'top':move, 'left':move<?php */?>}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.recentPost').width(), 'height':$('.recentPost').height()<?php /*?>, 'top':'8', 'left':'8'<?php */?>}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>
<script>
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:150}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
</script>
<?php wp_head();?>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="headerWrap">
<a href="http://www.mathewhood.com"><div id="logo"></div></a>
<div id="nav"></div>
</div>
page_home.php
<?php get_header();?>
<div id="contentWrap">
<div id="theContainer"></div>
<div id="newBanner"></div>
<?php query_posts('category_name=portfolio&showposts=12'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="recentPost">
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('204, 144', array('class' => 'thumbs')); ?>
</a>
<a href="<?php the_permalink();?>">
<div class="caption">
<div class="captionTitle"><?php the_title(); ?></div>
<p><?php the_content();?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<div class="cleared"></div>
</div>
<?php get_footer();?>
single_portfolio.php
<?php
/*
Template Name: Single Portfolio
*/
?>
<?php get_header();?>
<div id="contentWrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="content">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_footer();?>
I didn't put in footer.php because it is isn't necessary for you to see it.
Please help me out if you can, I really have no idea where to go from here :(
1 answers
solution1
1 ACCPTED 2011-08-20 03:24:15
In your ajax.js the second line should be
var href = $('.recentPost a').each(function(){ });
because the div with the class caption does not contain the href links you need. Make this change and check if it works.
And also the click function should be one the class recentPost not on caption !!!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.