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";
?>