Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Mart Heijer
Mart Heijer
219 Points
Posted by Mart Heijer
Mart Heijer
219 Points

Help with loading a blogpost inside a div with Ajax

Hi, I just started out with the wordpress theme development course and I 'm trying to load my posts from my "sidebar" into my single post via Ajax

I'm not that big of a technical guy and I'm fooling around in js but it's not showing me any results, was hoping anyone here could help me out.

Here's the script I wrote:

<script>

$(document).ready(function(){
 $.ajaxSetup({cache:false});
 $(".blogitem-link").click(function(){

    var blogitem_title      = ('<h1>   "    . <?php the_title();   ?> .     " </h1>');
    var blogitem_author     = ('<span> "    . <?php the_author();  ?> .     " </span>');
    var blogitem_date       = ('<h2>   "    . <?php the_date();    ?> .     " </h2>');
    var blogitem_content    = ('<p>    "    . <?php the_content(); ?> .     " </p>');


    var blogitems = [blogitem_title.blogitem_author,blogitem_date,blogitem_content];

    $(".blogpost").html("loading content...");
    $(".blogpost").hide().load(blogitems).fadeIn('slow');
    return false;
    });

}); </script>

Right now when I click .blogitem-link it's only showing me: Loading content... inside my .blogpost

Thanks in advance!

1 Answer

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

Hi Mart!

AJAX (as a part of client side Javascript) is run in the browser while PHP is run on the server. So, injecting PHP into the browser isn't going to get you the behavior you want – the injected PHP doesn't have access to all the other stuff on the server (like the database and PHP interpreter). It won't even run.

Why Am I Not Seeing Anything Replace The Loading Text?

The reason you aren't seeing anything from the blogitems array inserted into the page at all is likely two-fold: JavaScript concatenation and a typo.

Unlike PHP, JavaScript uses the + operator to concatenate strings (PHP uses .). As a result, your variables for blogitem_title, blogitem_author, blogitem_date, and blog_item_content don't make much sense.

    var blogitem_title      = ('<h1>   "    . <?php the_title();   ?> .     " </h1>');
    var blogitem_author     = ('<span> "    . <?php the_author();  ?> .     " </span>');
    var blogitem_date       = ('<h2>   "    . <?php the_date();    ?> .     " </h2>');
    var blogitem_content    = ('<p>    "    . <?php the_content(); ?> .     " </p>');

You'd have to use a + instead of a . here.

    var blogitem_title      = ('<h1>   "'    + '<?php the_title();   ?>' +     '" </h1>');
    var blogitem_author     = ('<span> "'    + '<?php the_author();  ?>' +     '" </span>');
    var blogitem_date       = ('<h2>   "'    + '<?php the_date();    ?>' +     '" </h2>');
    var blogitem_content    = ('<p>    "'    + '<?php the_content(); ?>' +     '" </p>');

There is also a small typo in your blogitems array:

var blogitems = [blogitem_title.blogitem_author,blogitem_date,blogitem_content];

You are using a . to separate the first two items in the array. In JavaScript the . is actually used to access methods and properties of objects (dot notation). So, replace that first . with a , and you'll be constructing an array with the variables you intended.

var blogitems = [blogitem_title,blogitem_author,blogitem_date,blogitem_content];

But the JavaScript interpreter still doesn't understand PHP, and PHP still won't be running on the client.

So, How Do I Use AJAX in Wordpress?

This page from the Codex should help to get you started. You'll need some PHP to handle the AJAX requests you send to the server and return some kind of response (something like WP_Ajax_Response() will return XML). You'll then use that response data to build up blogitems and inject it into your page.

For more on how AJAX works, checkout the AJAX Basics course. Since you're already using jQuery, you might consider using $.ajax() to make you life a little easier (documentation).

Good luck!