Wordpress featured image on hover - jQuery.Deferred exception: hrefValue is not defined

Question

I'm trying to make website which shows posts featured image on link hover.

Example:

So I started to learn basic jquerry and php and I tried to achive that by using get_the_post_thumbnail($post_id); function which return image basing on post id. To get id I used url_to_postid(); Wordpress function. As it states it: "Examine a URL and try to determine the post ID it represents." so the $url is required. So i thought I can deliver the variable by writing script, which gets 'href' from on mouseover:

$('#bio-box').find('a').mouseover(function() {
    var hrefValue = ($(this).attr('href'))
   console.log(hrefValue)
});

And then, to pass this variable to php I used ajax jquerry

 $.ajax({
        url: '/wp-admin/admin-ajax.php',
        data: {
            'action': 'php_tutorial',
            'php_test': hrefValue
        },
        success: function(data){
            console.log("happy")
        }
    });

Unfortunatly unsuccessfully. Because console returns:

jquery.min.js:2 jQuery.Deferred exception: hrefValue is not defined ReferenceError: hrefValue is not defined
    at HTMLDocument.<anonymous> (http://localhost:8888/jakubtrz-portfolio/en/studio/:159:25)
    at e (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
    at t (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307) undefined

I wish someone would explain to me why or would tell me whats the best solution to achive the desired effect.

Here is full php file:

 <?php
get_header();
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $('#bio-box').find('a').mouseover(function() {
        var hrefValue = ($(this).attr('href'))
       console.log(hrefValue)
    });
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        data: {
            'action': 'php_tutorial',
            'php_test': hrefValue
        },
        success: function(data){
            console.log("happy")
        }
    });
}); 


</script>

<?php
function our_tutorial(){
    if(isset($_REQUEST)){
        $testing = $_REQUEST['php_test'];

        echo 'This is our JS Variable :'.$testing;

        global $wpdb;
        $wpdb->insert(
            $wpdb->prefix.'lms_enroll',
            [
                'ID' => $testing
            ]
        );

    }
    die();
}
add_action('wp_ajax_php_tutorial', 'our_tutorial');
?>

<main id="primary" class="site-main">
<div class="container position-relative my-7">

    <div class="row">
        <div class="col-lg-6" id="bio-box">
            <a href="http://localhost:8888/jakubtrz-portfolio/2021/12/21/quod-si-ita-se-habeat-non-possit/">Example post link</a>
            <a href="http://localhost:8888/jakubtrz-portfolio/2021/12/21/quid-ergo-aliud-intellege/">Example post link2</a>
        </div>

        <div class="col-lg-6">
            <div class="featured-image">
                <?php 
                    $post_id = url_to_postid($testing);
                    echo get_the_post_thumbnail($post_id);
                ?>
            </div>
        </div>
    </div>

</div>
</main><!-- #main -->

<?php
get_footer();

1. Edit The problem with console has been resolved thx to @vee comment.

What I'm struggling with now is that function:

function our_tutorial(){
    if(isset($_REQUEST)){
        $testing = $_REQUEST['php_test'];

        echo 'This is our JS Variable :'.$testing;

        global $wpdb;
        $wpdb->insert(
            $wpdb->prefix.'lms_enroll',
            [
                'ID' => $testing
            ]
        );

    }
    die();
}
add_action('wp_ajax_php_tutorial', 'our_tutorial’);

it echos 'This is our JS Variable:' but no $testing variable.

2. Edit

Again thx to @vee answer the problem with echo $testing is resolved. New and probably last thing have occurred. Wordpress Thumbnail still doesn't change.

Answer 1

The error jquery.min.js:2 jQuery.Deferred exception: hrefValue is not defined is because you did not declare variable in the scope that it can be access.

To fix this problem, move var hrefValue; to out side document ready.

See JavaScript scope reference .

var hrefValue;
$(document).ready(function() {
    $('#bio-box').find('a').mouseover(function() {
       hrefValue = ($(this).attr('href'));// just use hrefValue = xx.
       console.log(hrefValue);
    });
});

Now JS error problem solved, your next problem is PHP can't retrieve value.
This is because JS variable hrefValue is null or nothing and you immediately make AJAX call to PHP.

To fix this, move AJAX process to where the hrefValue JS variable was assigned.

Example:

var hrefValue;
$(document).ready(function() {
    $('#bio-box').find('a').mouseover(function() {
        hrefValue = ($(this).attr('href'));// just use hrefValue = xx.
        // if AJAX is here, it means it will working on mouse over.
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            data: {
                'action': 'php_tutorial',
                'php_test': hrefValue
            },
            success: function(data){
                console.log("happy")
            }
        });
    });
});

Answer 2

Solution

var hrefValue; // define/declare global

$(document).ready(function() {

    $('#bio-box').find('a').mouseover(function() {
// here just assign value
        hrefValue = ($(this).attr('href'))
       console.log(hrefValue)
    });

});