Add a counter for mouseovers (custom field)

Question

First of all, some recommended reading – AJAX in Plugins.

I realise this is not a plugin, but the Codex is still relevant, and as you’ll see in the PHP section, you can use the WP AJAX handler to handle front end calls as well as those from the admin area.

Javascript

For this, you would be better advised putting your JS in an external *.js file that is included in your page. That way you can have just one block of code, rather than it being repeated for each Post in your Loop.

To capture the mouseenter event on any of those <divs> we can add a class (see PHP below), and then grab the ID before firing off an AJAX request.

You’ll notice in the previous paragraph I mentioned mouseenter, not mouseover; this is because mouseenter will only fire once every time a visitor hovers over a <div>, where as mouveover will fire repeatidly every time they move the mouse.

jQuery(document).ready(function($){

    $('.update-hover-count').on('mouseenter', function(){
    
        var data = {
            action:     'update_hover_count',                   // The AJAX action to carry out
            post_id:    $(this).attr('id').replace(/\D/g, '')   // The numerical ID of the post that has been hovered
        }
        
        /** Make the AJAX request */
        $.post(MyAjax.ajaxurl, data, function(response){
        
            // This is the success function, do somthing here if you wish but you don't have to.
            
        }).fail(function(){
        
            // Do something to log a failure, if you wish but you don't have to.
            
        });
        
    });
    
});

PHP

When using the built in WordPress AJAX handler (wp-admin/admin-ajax.php) all the goodness of WP is available to your AJAX call. This also means that you don’t have to have a standalone file for you AJAX routine, you can add it to functions.php and it’s called via a hook (although you can still have it in its own file and include that file if you wish).

As this will be (I assume) on the front end you have to localize the aforementioned admin-ajax.php script so that it is available, but that can also be added to functions.php

/**
 * Localize the admin-ajax script
 */
add_action('wp_enqueue_scripts', 'my_localize_ajax_admin');
function my_localize_ajax_admin(){

    /** For AJAX requests */
    wp_enqueue_script('my-ajax-request', admin_url('admin-ajax.php'), array('jquery'));
    wp_localize_script('my-ajax-request', 'MyAjax', array('ajaxurl' => admin_url('admin-ajax.php')));
    
}

/**
 * AJAX call to update the number of times a post is hovered
 */
add_action('wp_ajax_update_hover_count', 'my_update_hover_count');          // For users who are logged in
add_action('wp_ajax_nopriv_update_hover_count', 'my_update_hover_count');   // For users who are NOT logged in
function my_update_hover_count(){

    $post_id = $_POST['post_id'];   // Extract the ID of the post that was hovered
    
    /** Grab the postmeta value for 'hits' for 'post_id' */
    $key = 'hits';
    $hits = get_post_meta($post_id, $key, TRUE);
    
    /** Check to see if any hits have been previously recoreded */
    if($hits) : // They have, update the postmeta key
        $new_hits = intval($hits + 1);
        update_post_meta($post_id, $key, $new_hits, $hits);
    else :  // They have not, create the postmeta key
        add_post_meta($post_id, $key, 1);
    endif;
    
    echo get_post_meta($post_id, $key, TRUE);
    
    die();  // Required for a proper result
    
}

HTML

Now that the script to handle the AJAX call is in a *.js file, your HTML in the template file that is to utilise the AJAX routine is a lot simpler.

<div id="post-<?php the_ID() ?>" <?php post_class('update-hover-count'); ?>>

    <!-- Add additional HTML here -->
    
</div>

Javascript

PHP

HTML

Related Posts: