How to manage ajax calls and JSON in wordpress

Question

I have a custom post type that i want to access through jQuery - preferably using JSON.

So first things first. creating a function that returns/echos json is easy enough, but how would I access it through jquery.

as Mike writes in this question, he - as far as I understand - places it in the wordpress root. which would make it accessable using the php file name - but Is this recommendable? I would rather put it inside a plugin folder.

I have tried reading the wordpress codex, but the way ajax calls are handled just confuses me, as you are posting every ajax call to admin-ajax.php, even though it is not an admin page?

Can someone please straighten out the problems I'm having?

/Storm

edit

The problem I had was understanding how ajax calls were to be made in wordpress, as well as where to place your php and js code to do/handle the calls.

In the other question I linked to, you created a function placing the file in the wp root - I dont want to do that. But I have now learned how to use the wp_ajax_(nopriv_)[action] and can effectivly access the json i create. The problem remaining is Where i should place the JS to make the call. I want to place it in the plugins js file, but as this is to be presented in a page, not on the admin site, ajaxurl isn't defined, so i have to echo using php.

echo admin_url('admin-ajax.php');

So the question becomes how should I combine this php with the javascript, and how should i then enqueue it, seeing as it's not a file or a script.

Answer 1

Ajax Handler

It is indeed a bit confusing that the Ajax handler is in the wp-admin/ directory, but yes, you can and should use it for non-admin requests too. You then register a handler for the wp_ajax_nopriv_[action] hook, instead of the normal wp_ajax_[action]. In this case you only have to follow the first lines of admin-ajax.php, since a request done by a user that is not logged in will already leave the page around line 50.

So register a function for the hook wp_ajax_nopriv_get_custom_post_data, and it will get called if you ask for admin-ajax.php with the action parameter set to get_custom_post_data. Be sure to call die() at the end of your handler yourself, otherwise the default die(-1) will be returned. And also register the logged-in version, wp_ajax_get_custom_post_data (to the same handler function, no problem), since if you are logged in to your site, you will not hit the nopriv hook.

Server-side config to Javascript

The trick to send server-side configuration data (like the admin-ajax.php url), is wp_localize_script(). You pass it an array of keys and values which will be included in the top of the page. This was probably originally created only for localizable strings, but you can use it to pass configuration data too.

wp_localize_script('storm_json_config', 'storm_config', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
));

storm_json_config is the handle name (if you want to dequeue it later), storm_config is the name of the Javascript object that will contain your data. So your static Javascript file can contain a line like jQuery.post(storm_config.ajaxurl, ...).

See also bueltge's answer to a similar question.

Static Javascript from the plugin dir

To load a static Javascript file from your own plugin dir, you use wp_enqueue_script(). That would look something like this:

wp_enqueue_script('storm_json', plugin_dir_url(__FILE__) . 'js/json.js', array('jquery'), '20101105');

Where storm_json is again a handle name, then you give the link to the file, then the dependencies (can be null), and then a version number that will be added after the request to beat browser caches on updates.