使用ajax和masonry javascript将wordpress帖子加载到div中，但是href没有加载到div中

Question

I've seen a few issues with this before, but within a masonry script I'm not sure if I'm on the right track.

Result: the link opens an entirely new page, when what I'm trying to do is load the content into the div.

index.php code:

<div id="primary" class="site-content">
    <div id="content" role="main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="miniLoader"></div>
    <div class="box">
      <a class="miniLoader" href="<?php the_permalink() ?>">
      <?php if (has_post_thumbnail()) {
        the_post_thumbnail('thumbnail');
      }?>
      <h2><?php the_title(); ?></h2></a>
    </div>
    <?php endwhile; endif; ?>
    <?php get_footer(); ?>

header.php code:

 <script>
jQuery(document).ready(function($){
    $('#container').masonry({
      itemSelector: '.box',
      });
});
 </script>

 <?php wp_head(); ?>

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache:false});
    $(".miniLoader").click(function(){
    var post_id = $(this).attr("href")
    $("#miniLoader").html("loading...");
    $("#miniLoader").load(post_link);
    return false;
 });

 });

As far as I know, the placement is in the loop and the script falls into place for where it should be. Or am I getting bad advice for placement and the 'rel'? I've heard about not using 'rel' anymore what with html5 and wordpress 3.5...

Any help would be hugely appreciated!

(please let me know if I'm missing pieces of the puzzle for this to make sense)

Answer 1

Try adding event.preventDefault() to disable the normal link action:

$(".miniLoader").click(function(event){
    event.preventDefault();

And the post_link variable appears to still need to be set:

var post_id = $(this).attr("href");
var post_link = 'your-api-file.php?id=' + post_id;
$("#miniLoader").html("loading...");
$("#miniLoader").load(post_link);

Oh and if you don't have an API file, jQuery can actually just load a whole WordPress page, but only display the content from the element that you want. In this case the AJAX load request will only grab and show what's in the #content element:

$('#miniLoader').load('/?p='+ post_id +' #content');

Answer 2

@hansvedo

After much mucking about, here is how I've solved the script problem:

$(document).ready(function(){

$.ajaxSetup({cache:false});
$("h1 a").click(function(event){
    event.preventDefault();
    var post_link = $(this).attr("href");
    $("#miniloader").html("loading...");
    $("#miniloader").load(post_link);
return false;
});

});

and the index alteration as follows:

<div id="miniloader" class="miniloader"></div>

I've been trying to implement your hint at only loading the #content, but to no avail. Looks like there isn't a 'content' ID, but I did try to implement one in the code below:

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="entry-header">
 <h1 class="entry-title"><?php the_title(); ?></h1>
 <div class="entry-meta">
 <?php toolbox_posted_on(); ?>
 </div><!-- .entry-meta -->
 </header><!-- .entry-header -->
 <div class="entry-content" id="content">
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'toolbox' ), 'after' => '</div>' ) ); ?>
 </div>