Update meta values with AJAX

Question

I am working on a voting system in Wordpress. I first made it with GET requests but someone told me you should not use GET for this, So I started working with AJAX to update custom fields/meta values, after reading this article. I've read a lot of the documentation from jQuery and Wordpress AJAX pages this is with I have now.

I think I am on the good way, but there is something missing / or I am doing wrong.

The vote function works fine, because I have tested this earlier with the GET requests.

I have this simple HTML test form:

<form id="vote_form" method="post">
    <input type="hidden" id="id" name="id" value="810">
    <input type="hidden" id="post_id" name="post_id" value="811">
    <input type="submit">
</form>

I have this jQuery file included in my header.php and off course included the jQuery library itself.

jQuery(document).ready(function() {

    jQuery( "#vote_form" ).submit( function( event ) {

        event.preventDefault();

        var id = jQuery("#vote_form #id").val();
        var post_id = jQuery("#vote_form #post_id").val();
        var vote = 'up';

        jQuery.ajax({
            type: "POST",
            url: stn_vote.ajaxurl,
            data: { 
                id: id, 
                post_id: post_id,
                vote: vote, 
                action: 'stn_voting' 
            },

        }); 

    });

});

And my vote function hooked into the wp_ajax action.

    // Ajax Voting
wp_register_script( 'ajax-vote', get_template_directory_uri() . '/js/ajax-vote.js', array('jquery') );

$nonce = wp_create_nonce("vote_nonce");
$stn_vote_data = array(
    'ajaxurl' => admin_url( 'admin-ajax.php'),
    'nonce' => $nonce,
);
wp_localize_script( 'ajax-vote', 'stn_vote', $stn_vote_data );

function stn_script_enqueuer() {    
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'ajax-vote' );

}
add_action( 'wp_enqueue_scripts', 'stn_script_enqueuer' );

        // Vote Up
        if( isset( $_POST['id'] ) ) {

            //simple Security check
            if ( ! wp_verify_nonce( $_POST['nonce'], 'vote_nonce' ) )
                die ( 'Busted!');

            if( isset( $_POST['post_id'] ) ) {
                $post_id =  $_POST['post_id'];
            }

            if( $_POST['vote'] == 'up' ) {

                $vote_id = $_POST['id'];
                $key = 'vote_up_' . $post_id;
                $vote_up = get_post_meta( $vote_id, $key, true );
                $value = $vote_up + 1;
                $update_vote_up = update_post_meta( $vote_id, 'vote_up_' . $post_id, $value );

                // Update vote count
                $vote_count = get_post_meta( $vote_id, 'vote_count_' . $post_id, true );
                $value = $vote_count + 1;
                $update_vote_count = update_post_meta( $vote_id, 'vote_count_' . $post_id, $value );

                // Update vote percent
                $vote_percent = ( ( $vote_up + 1) / ( $vote_count + 1 ) ) * 100;
                update_post_meta( $vote_id, 'vote_percent_' . $post_id, $vote_percent );

            }

            // Vote Down
            else {          
                $vote_id = $_POST['id'];
                $key = 'vote_down_' . $post_id;
                $vote_down = get_post_meta( $vote_id, $key, true );
                $value = $vote_down + 1;
                $update_vote_down = update_post_meta( $vote_id, 'vote_down_' . $post_id, $value );

                // Update vote count
                $vote_count = get_post_meta( $vote_id, 'vote_count_' . $post_id, true );
                $value = $vote_count + 1;
                $update_vote_count = update_post_meta( $vote_id, 'vote_count_' . $post_id, $value );

                // Update vote percent
                $key = 'vote_up_' . $post_id;
                $vote_up = get_post_meta( $vote_id, $key, true );
                $vote_percent = ( $vote_up / ( $vote_count + 1 ) ) * 100;
                update_post_meta( $vote_id, 'vote_percent_' . $post_id, $vote_percent );

            }
        }
        die();

    }
    add_action('wp_ajax_stn_voting', 'ajax_stn_voting');
    add_action('wp_ajax_nopriv_stn_voting', 'ajax_stn_voting');

Answer 1

Couple of things:

1: When you include the script after jquery, localise it using the wp_localize_script function:

$nonce = wp_create_nonce("vote_nonce");
$yourscript_info = array(
    'ajaxurl' => admin_url( 'admin-ajax.php'),
    'nonce' => $nonce
);
wp_localize_script( 'yourscript', 'yourscript', $yourscript_info );

$.ajax({
    type: "POST",
    url: yourscript.ajaxurl,
    data: { id: id, vote: vote, nonce: yourscript.nonce, action: "stn_voting" },

2: Add some security checks using a nonce:

function ajax_stn_voting() {
    //simple Security check
    if ( ! wp_verify_nonce( $_POST['nonce'], 'vote_nonce' ) )
        die ( 'Busted!');

3: You don't need to include the post id in the meta keys. Its already attached to the post, so its already stored in the database.

$key = 'vote_up';
instead of
$key = 'vote_up_' . $post->ID;

Not just the vote_up key, but all of the _' . $post->ID; part is unnecessary inside the function. If all of your keys are different, you can't order the posts based on these values and its simply an unnecessary thing to do.

4: You need to "die" at the end of the function when you're using ajax:

    die();
}
add_action('wp_ajax_stn_voting', 'ajax_stn_voting');
add_action('wp_ajax_nopriv_stn_voting', 'ajax_stn_voting');

Otherwise, the script looks good to me.

And what G. M. said in the comments above:)

Answer 2

Your custom script uses $'s and thus does not account for "noConflict" mode.

Use a proper no-conflict wrapper, or simply replace "$" with "jQuery" everywhere.

More info: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

The $ shortcut is not valid in all contexts. You need to stop using it when possible, or define it specifically using a wrapper as described in that link.