ajax front-end increment views on click

I’m using a redirect plugin that adds rewrites to the permalink. I want to count views on the front-end since I can’t hook into the single.php as a result. This seems to be close, but it isn’t incrementing the views meta value. I’m not sure where to debug, or tr

Here’s my code so far:

Read More

I’m copying most of this from the codex and another question here.
Here’s the javascript snippet:

jQuery(document).ready(function($) {
$('.external').click(function(event) {
      // had to add the post id to the permalink in loop as url to postid didn't work
      var postID = $(this).attr('id');
      var data = {
         action: 'inc_views',
        post_id: postID
    };
    // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
    jQuery.post(ajaxurl, data, function(response) {
           //update the custom field value without a page refresh
    });
    });
});

Here’s the snippet in functions.php:

function increment_post_views() {

    global $wpdb; // is this needed?
    $post_id = intval( $_POST['post_id'] );
    $meta_key = 'views-' . $post_id;
    // increment the views
    $views = get_post_meta( $post_id, $meta_key, true );
    update_post_meta( $post_id, $meta_key, intval( $views ) + 1 );
    die();
}
add_action('wp_ajax_inc_views', 'increment_post_views');

update: some progress

the following code update does increment the post view count, but does not continue on to the actual post. if I uncomment the window.location, it does redirect but the view count is not incremented.

jQuery(document).ready(function($){
    $('.external').click(function(e){
        e.preventDefault();
        var redirect = $(this).attr('href');
        $.post(ajax_object.ajaxurl, {action:'inc_views',post_id:$(this).attr('id')});
        //window.location = redirect;
    });
});

final: this works

jQuery(document).ready(function($){
    $('.external').click(function(e){
        e.preventDefault();
        var redirect = $(this).attr('href');
        $.post(ajax_object.ajaxurl, {action:'inc_views',post_id:$(this).attr('id')}, function() {
            window.location = redirect;
        });
        return false;
    });
});

Related posts

Leave a Reply

2 comments

  1. Try this:

    jQuery(document).ready(function($){
        $('.external').click(function(e){
            var redirect = $(this).attr('href');
            $.post(ajax_object.ajaxurl, {action:'inc_views',post_id:$(this).attr('id')}, function() {
                return true; // continue with normal anchor link behavior
            });
            return false;
        });
    });
    
  2. Storing the href value and using the window.location = redirect line was the only way I could get it to work.

    jQuery(document).ready(function($){
        $('.external').click(function(e){
            e.preventDefault();
            var redirect = $(this).attr('href');
            $.post(ajax_object.ajaxurl, {action:'inc_views',post_id:$(this).attr('id')}, function() {
                window.location = redirect;
            });
            return false;
        });
    });