Question

I am using ajax to load a new post in wordpress. Here is the basic code:

function test(){
    var menuitem = document.getElementsByTagName('nav')[0].childNodes;
    for(var i= 0; i < menuitem.length; i++)
    {
        bindEvt(menuitem[i], "click", loadajax);
    }
};
function loadajax (event) {
    event.preventDefault();
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange  = function(){
        var content = document.getElementsByTagName('article')[0];
        if(xhr.readyState  == 4){
            if(xhr.status  == 200) {
                content.innerHTML = xhr.responseText;
            } else{
                content.innerHTML = 'Cannot connect to server. Check your internet connection'}
        }
    }; 

    xhr.open('GET', this.href, true);
    xhr.send();

}
bindEvt(window, "load", test);

It works fine, only it loads the entire new post with menu, header, footer, etc…
I only need the content and the comments. Is there any way using ajax to specifically ask wordpress for those contents or is the only way possible to do this to get the entire page and then extract only the content I need out of it and repost it?

Maybe make a specific template page for it? but how would I go about getting that working.

I hope I have been clear. Please tell me if not! First attempt at a WordPress Theme/PHP.

Thanks for your help!

Answer 1

You could use a template, but you’d need to write your own and it’d get a little fiddly. Andrew M.’s comment about a jQuery solution is correct, as are you: you would still be downloading the entire document, but you could only insert the part you want quite easily. See the section on loading page fragments for more details, but for the sake of expedience:

$('#result').load('ajax/test.html #container');

would load test.html and insert the contents of that document’s #container element into the #result element on the parent page. Easy as pie.

This will, of course, result in as much server load and cost as much bandwidth as fully rendering the source page, though fortunately images and such will only be loaded if they’re part of the rendered section. This overhead shouldn’t be anything to worry about unless you have a massive amount of traffic, however.

Let’s say that you want the server to just send the data you need in the first place: how you’d go about this depends on what other needs you have of the WordPress instance.

If you need to load just one page, and you don’t have humans looking at the original page directly, then it’s simple – write a template that consists only of:

while ( have_posts() ) : the_post();
  echo '<h2>';
  the_title();
  echo '</h2>';
  the_content();
endwhile;

and set that template for the post in question.

But if you need people to look at the post on the source page as well, you’re going to have to create a theme with a singles template as described above as well as install a theme switcher plugin, and pass the necessary mojo to invoke your machine-readable theme in your AJAX request. Which is a little complicated.