I have an iframe (I'm embedding YouTube videos) in my post.php template. What I need to happen is that everytime the iframe is mouseover'd, a value is passed via Ajax to a custom field in order store how many times the video has been mousovered. Here's my code for the mouseover:

$("iframe").mouseover(function(){
  <?php
    global $post;
    $id = $post->ID;
    $dataString = 'pid=' . $id;
 ?>
  $.ajax({
    type: "POST",
    url: "<?php bloginfo('template_directory'); ?>/ajax.php",
    data: "<?php echo $dataString; ?>",
    cache: false,
    success: function(html) {
      console.log(html);
    }
  });
});

This section of the code appears to work fine. Here's the code for ajax.php

<?php
  define( 'WP_USE_THEMES', false );
  require_once( '../../../wp-load.php' ); 
  $pid = $_POST['pid'];
  $counter_value = get_post_meta( $pid, 'counter' );    
  $counter_value = $counter_value + 1;
  update_post_meta( $post_id = $pid, $key = 'counter', $value = '$counter_value' );
  echo ("success"); 
?>

The problem seems to be that ajax.php isn't detecting $_POST['pid']. Or maybe that's not the problem, I'm at a bit of a loss now. If anyone has any suggestions, I'd be grateful!

I have an iframe (I'm embedding YouTube videos) in my post.php template. What I need to happen is that everytime the iframe is mouseover'd, a value is passed via Ajax to a custom field in order store how many times the video has been mousovered. Here's my code for the mouseover:

$("iframe").mouseover(function(){
  <?php
    global $post;
    $id = $post->ID;
    $dataString = 'pid=' . $id;
 ?>
  $.ajax({
    type: "POST",
    url: "<?php bloginfo('template_directory'); ?>/ajax.php",
    data: "<?php echo $dataString; ?>",
    cache: false,
    success: function(html) {
      console.log(html);
    }
  });
});

This section of the code appears to work fine. Here's the code for ajax.php

<?php
  define( 'WP_USE_THEMES', false );
  require_once( '../../../wp-load.php' ); 
  $pid = $_POST['pid'];
  $counter_value = get_post_meta( $pid, 'counter' );    
  $counter_value = $counter_value + 1;
  update_post_meta( $post_id = $pid, $key = 'counter', $value = '$counter_value' );
  echo ("success"); 
?>

The problem seems to be that ajax.php isn't detecting $_POST['pid']. Or maybe that's not the problem, I'm at a bit of a loss now. If anyone has any suggestions, I'd be grateful!

• posts
• ajax

• 2 Are you doing normal ajax or WordPress ajax? You may refer to this post Create Proper WordPress Ajax Request in JavaScript which use Vanilla JS but also work for jQuery, they are basically same. There is reference link to ajax handbook for WordPress and explanation of how it works in the post. – 西門 正 Code Guy - JingCodeGuy Commented Apr 16, 2020 at 14:35
• Return the $pid on ajax.php, see if its pass first on console.log(html); – Maidul Commented Apr 16, 2020 at 15:44
• You might be better using Google Analytics events or another 3rd party tracking solution. Updating post meta or options from the frontend in order to count things is notoriously unreliable. You'll face race conditions that mean your number is massively undercounted when under load. You'll also see server load due to lots of database writes that could slow down your entire site behind the scenes. This will also be useless on mobiles, tablets, etc. I also notice you're makign AJAX requests directly to a PHP files that bootstraps WP. This is dangerously insecure and extremely bad practice – Tom J Nowell ♦ Commented Apr 16, 2020 at 16:36
• Also, why do you assign variables inside the parameters of the update_post_meta call? Does this not generate a PHP fatal error for you? You've also left out the 3rd parameter of get_post_meta, it might return an array of values rather than a single value – Tom J Nowell ♦ Commented Apr 16, 2020 at 16:38
• Thanks for everyones input, I'll work through your answers. – Kev Commented Apr 17, 2020 at 8:26

1 Answer 1

The problem was with my counter value. It was initially being set as a string so I converted it to an integer and everything worked perfectly.

Finished code:

Page data being sent from

$("iframe").mouseover(function(){
  <?php
    global $post;
    $id = $post->ID;
  ?>
  $.ajax({
    type: "POST",
    url: "<?php bloginfo('template_directory'); ?>/ajax.php",
    data: "pid=<?php echo $id; ?>",
    cache: false,
    success: function(html) {
      console.log(html);
    }
   });
 });

On the Ajax processing page:

<?php
  define( 'WP_USE_THEMES', false );
  require_once( '../../../wp-load.php' ); 
  $pid = $_POST['pid'];
  $counter_val = get_post_meta( $pid, 'counter', true );
  $counter_val = floatval($counter_val);
  $counter_val = $counter_val + 1;
  echo $counter_val;
  update_post_meta( $post_id = $pid, $key = 'counter', $value = $counter_val );
  echo "done";
?>