title: Load Wordpress post content into DIV using AJAX
body: <p>I posted a question a couple of days ago on how to <a href="https://stackoverflow.com/questions/7496223/scroll-to-single-post/7496375#7496375">Scroll to Single Post</a> in a custom Wordpress template that I'm developing. What I need in the nut shell is to load a single post into a defined DIV when a particular link is clicked and then scroll down to that DIV holding the newly loaded content. Considering the dynamic content nature of Wordpress or that of any other CMS, the URL of that link cannot be an absolute one.</p>
  
  <p>Unfortunately, there wasn't any concrete answer around at that point of time, so I decided to snoop around a little bit. And since the main issue was loading the content in dynamically, I decide to zoom in on how I can do it with AJAX on Wordpress:</p>
  
  <p>So far, I have gotten a slight idea from a great post (<a href="http://www.emanueleferonato.com/2010/04/01/loading-wordpress-posts-with-ajax-and-jquery/" rel="nofollow noreferrer">Loading WordPress posts with Ajax and jQuery</a>) by Emanuele Feronato. He basically stores the post ID in the rel attribute of the clickable link and then calls it. Well, there are a few other steps to make this work, but the reason I'm only mentioning the post ID right now is because it seems it's the only part of the equation that isn't right; the post ID loads into the link's rel attribute but fails to load into the .load function.</p>
  
  <p>Just to give you a better idea of what I've gotten in my markup so far:</p>
  
  <p><strong>THE AJAX/JQUERY IN HEADER.PHP</strong></p>
  
  <pre><code>$(document).ready(function(){
  
      $.ajaxSetup({cache:false});
      $(".trick").click(function(){
          var post_id = $(this).attr("rel");
          $("#single-home-container").html("loading...");
          $("#single-home-container").load("http://&lt;?php echo $_SERVER[HTTP_HOST]; ?&gt;/single-home/",{id:post_id});
      return false;
      });
  
  });
  </code></pre>
  
  <p><strong>INDEX.PHP</strong></p>
  
  <pre><code>&lt;?php get_header();?&gt;
  
  &lt;!--home--&gt;
  &lt;div id="home"&gt;
  
  &lt;!--home-bg--&gt;
  &lt;img class="home-bg" src="&lt;?php bloginfo('template_url');?&gt;/images/home-bg.jpg" /&gt;
  &lt;!--home-bg--&gt;
  
      &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
  
      &lt;a class="trick" rel="&lt;?php the_ID(); ?&gt;" href="&lt;?php the_permalink();?&gt;"&gt;
  
          &lt;div class="box element col&lt;?php echo rand(2,4); ?&gt;" id="&lt;?php $category = get_the_category(); echo $category[0]-&gt;cat_name; ?&gt;"&gt;               
  
              &lt;?php the_post_thumbnail(); ?&gt;
  
              &lt;span class="title"&gt;&lt;?php the_title(); ?&gt;&lt;/span&gt;    
  
              &lt;span class="ex"&gt;&lt;?php the_excerpt(); ?&gt;&lt;/span&gt;
  
          &lt;/div&gt;
  
      &lt;/a&gt;
  
      &lt;?php endwhile; endif; ?&gt;
  
  &lt;/div&gt;
  &lt;!--home--&gt;
  
  &lt;div id="single-home-container"&gt;&lt;/div&gt;
  </code></pre>
  
  
  
  <p><strong>SINGLE-HOME.PHP (THIS IS A CUSTOM TEMPLATE)</strong></p>
  
  <pre><code>&lt;?php
  
      /*
      Template Name: single-home
      */
  
  ?&gt;    
  
  &lt;?php
  
      $post = get_post($_POST['id']);
  
  ?&gt;
  
      &lt;!--single-home--&gt;
      &lt;div id="single-home post-&lt;?php the_ID(); ?&gt;"&gt;
  
      &lt;!--single-home-bg--&gt;
      &lt;div class="single-home-bg"&gt;
  
      &lt;/div&gt;
      &lt;!--single-home-bg--&gt;
  
      &lt;?php while (have_posts()) : the_post(); ?&gt;
  
          &lt;!--sh-image--&gt;
          &lt;div class="sh-image"&gt;
  
              &lt;?php the_post_thumbnail(); ?&gt;
  
          &lt;/div&gt;
          &lt;!--sh-image--&gt;
  
          &lt;!--sh-post--&gt;
          &lt;div class="sh-post"&gt;
  
              &lt;!--sh-cat-date--&gt;
              &lt;div class="sh-cat-date"&gt;
  
                  &lt;?php
  
                      $category = get_the_category(); 
                      echo $category[0]-&gt;cat_name;
  
                  ?&gt;
  
                  - &lt;?php the_time('l, F jS, Y') ?&gt;
  
              &lt;/div&gt;
              &lt;!--sh-cat-date--&gt;
  
              &lt;!--sh-title--&gt;
              &lt;div class="sh-title"&gt;
  
                  &lt;?php the_title();?&gt;
  
              &lt;/div&gt;
              &lt;!--sh-title--&gt;
  
              &lt;!--sh-excerpt--&gt;
              &lt;div class="sh-excerpt"&gt;
  
                  &lt;?php the_excerpt();?&gt;
  
              &lt;/div&gt;
              &lt;!--sh-excerpt--&gt;
  
              &lt;!--sh-content--&gt;
              &lt;div class="sh-content"&gt;
  
                  &lt;?php the_content();?&gt;
  
              &lt;/div&gt;
              &lt;!--sh-content--&gt;
  
      &lt;/div&gt;
      &lt;!--sh-post--&gt;        
  
      &lt;?php endwhile;?&gt;
  
      &lt;div class="clearfix"&gt;&lt;/div&gt;    
  
      &lt;/div&gt;
      &lt;!--single-home--&gt;
  </code></pre>
  
  <p>Just for the record: When the post ID failed to load, I tried installing that particular Kubrick theme used in Emanuele Feronato's demo and made the necessary changes according to his guide but nothing worked.</p>
  
  <p>Does anyone have any idea what's going on or if there is any other way to dynamically load the post ID into the .load function?</p>