WordPress and JQuery – how get a post via ajax

Which end are you having trouble with: Writing a javascript call using jquery, or getting WP to return just one post?

Either way, start here:

AJAX

Hi adamrbrown & Julietjaxx,

I have the same question as Julietjaxx, how can I retrive a WordPress post using Jquery (without page reload)? I checked the links on the WordPress.org page but nothing really gives an easy to implement example using Jquery.
I would be very grateful, if someone could explain this to me or refer me to a good tutorial, specifically for implementation in WordPress.

Thank you!

I haven’t done this on my own site with jQuery but I’ve written a fair amount of jQuery AJAX code… and the code below has been tested on my development site.

I suggest reviewing the documentation on the “load()” function: http://docs.jquery.com/Ajax/load#urldatacallback

Keep in mind that instead of $() you’ll want to use jQuery(). So the example on that page is
jQuery("#links").load("/Main_Page #p-Getting-Started li");

Exactly how you integrate a query in your site will depend a great deal on how your site is designed and what you’re attempting to do. And for SEO, and any amount of pay-per-click advertising, you probably only want to do this as an “enhancement”. For example, show a snippet of a post when someone mouseovers a link on an archive page. The jQuery examples tend to be simple, but if you peruse through them you’ll discover bits and pieces you can combine.

To do that, you’ll need to pair the load() function with an event handler and a hidden div that pops up, and another event handler for when the mouse moves away. But here’s a simpler example, if you include this in your header.php just before the “</head>” line, when you mouse over a WordPress sidebar link, the link’s content div should replace the ever-present “content” div already on your page (wait a second, it may not be instantaneous, and it only works on links inside the div with the id “sidebar”):

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#sidebar a").mouseover(function () {
        jQuery("#content").load(jQuery(this).attr("href") + " #content");
    });
});
</script>

Now, this code is crude… it doesn’t care whether you’ve got an external or internal link, and the jQuery library include may be redundant… it’s not the correct way to include it, for that I suggest the Codex. So I really don’t recommend using it as is! But it’s a working example that should work on most WordPress sites with standard Kubrick-style templates (that use the “sidebar” and “content” divs). Or, you can change the code to fit your site…

I highly recommend the book “jQuery in Action” if you really want to use jQuery on your WordPress site, or anywhere for that matter.

Start by looking at the code of similar plugins, or even the WordPress core code (because it does indeed use Ajax for various things including autosave). You won’t find anything more accurate than the source code for a how-to, and if it’s been done the code is out there… it might even already be on your hard drive.

I’ve been having the same troubles where I was sending a jQuery.ajax() post and it not actually sending any post data at all! I managed to fix it by appending an extra string on to the post URL (yeah, that old trick!). For example:

Within JS:

var now = new Date();
var time = Date.UTC(now.getFullYear(), now.getMonths(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());
jQuery.ajax({
	type: "POST",
	data: "&var1=Hello&var2=there",
	url: "http://example.com/?time="+time,
	success: function(results) {
		alert(results);
	}
});

Or this way since I’ve got my JS code within a PHP file:

jQuery.ajax({
	type: "POST",
	data: "&var1=Hello&var2=there",
	url: "http://example.com/?time=<?=time(); ?>",
	success: function(results) {
		alert(results);
	}
});

I hope that helps someone. I wrote this code quickly in here so not too sure if the JS for the time constructor is correct!