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

@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>