How to create a button click counter meta box?

Question

First of all output your javascript in like this is a worse practice. So it’s a lot better if you create your javascript file and the enqueue it using wp_enqueue_script hooked admin_enqueue_scripts action.

function enqueue_my_ajax( $hook ) {
    if( 'post.php' != $hook && 'post-new.php' != $hook ) return;
    // if you use in theme use get_template_directori_uri to retrieve the url
    wp_enqueue_script( 'my_ajax_script', plugins_url('/my_ajax_script.js', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'enqueue_my_ajax' );

Second, when you use metabox and ajax is always a good idea use nonces. You can use wp_nonce_field to create an hidden nonce input in the metabox and the retrieve the value and post with ajax.

Check in Codex for the functions named above for more info.

Regarding the problem, the post Id should be passed via ajax, or ajaxResponse cannot make use of it.

So the function that display your metabox should be:

function wpse_54822_inner_custom_box( $post ) {
  $current_count = get_post_meta($post->ID, '_increment_key', true) ? : 1;
  wp_nonce_field( 'increment_my_count', '_nonce_count' );
?>

<input type="hidden" id="_count" name="_count" value="<?php echo $current_count ? : 1; ?>" />
<input type="hidden" id="_postid" name="_postid" value="<?php echo $post->ID; ?>" />
<div id="counter"><?php printf( 'Current Count: %d', $current_count ); ?></div>
<input type="button" name="button" class="button button-primary submitmeplease" value="<?php _e('Update'); ?>" />

<?php } ?>

Your javascript (in the my_ajax_script.js file enqueued as above) should be:

jQuery(document).ready(function($){
  $('.submitmeplease').on('click', function(e){
    e.preventDefault();
    var nonce = $('input[name="_nonce_count"]').val();
    var count = $('#_count').val();
    var id = $('#_postid').val();
    $.ajax({
      url: ajaxurl,
      type: 'POST',
      data: { _nonce_count: nonce, action: 'update_my_count', _count: count, postid: id },
      success: function( data ) {
        if (data != '' && data != '0')
          $('#_count').val( data );
          $('#counter').html('Current Count: ' + data)
        }
    });
  });
});

Your myUpdateCount function shoud be:

function myUpdateCount() {
  if ( ! check_admin_referer( 'increment_my_count', '_nonce_count' ) ) die();
  $postid = isset( $_POST['postid'] ) && $_POST['postid'] ? $_POST['postid'] : null;
  if ( ! $postid ) die();
  if ( ! current_user_can('edit_posts', $postid) ) die();
  $new_count = isset( $_POST['_count'] ) && $_POST['_count'] ? $_POST['_count'] + 1 : 1;
  update_post_meta($postid, '_increment_key', $new_count);
  die( (string)$new_count );
}

add_action('wp_ajax_update_my_count', 'myUpdateCount');

Related Posts: