Add Ajax to rating button

Question

I have a ratings button in WordPress that outputs the number of people who rated the post. Is it possible to add the Ajax functionality so it doesn't refresh the whole page just the button number?

http://pastie.org/3684431

Thank You in advance :)

Answer 1

I'll only outline how to do it since there are plenty of answers on this site that address how AJAX works in WordPress. Just check out the ajax tag.

Yes, you'll need some javascript to watch for when the button is clicked. When it is, you send a custom action, say 'myaction', and the post ID (and possibly a nonce) to the WordPress' admin-ajax page.

You can attach the nonce and admin-ajax page url using wp_localize_script (see this answer)

This triggers one of two hooks:

• wp_ajax_myaction (for logged in users)
• wp_ajax_nopriv_myaction (for logged out users)

(see this answer). You can hook onto those with a function that takes the sent post ID, performs nonce checks and user permissions etc, and adds the rating (I assume this is like a 'like' button - else you'll want to send the rating too).

Once it's processed you can then echo details back (success/error messages) and then exit. The returned details will be accessible in your script to perform any further action (disable the button, display an error message, etc).

The specifics of all the javascript above will depend on how you implement it (usually using jQuery) - but even then there are a few methods you can use. If you get stuck on producing the javascript, stackoverflow.com might be useful.