Site icon Hip-Hop Website Design and Development

WordPress update_user_meta onclick button with Ajax

I’ve a button that’s restricted to 7 clicks, when clicking quantity 5 is disabled, My drawback if the consumer login from totally different system, the rely begin againg in 0 similar as refresh web page.
my wants is, Save in user_meta the press quantity consequence and replace if click on once more till click on quantity 5 the button change to disabled.

In DB user_meta data:
user_id: user_id
meta_key:clickCounterTrav
meta_value: 1 (variety of clicks)

Right here is the code when web page load, disable button if variety of click on is > 4 Do Not Work:

<script>
    window.addEventListener("load", ()=>{
   if(clickCounterTrav>4)
        doc.getElementById("btnTraPack").disabled = true;
    if(clickCounterTrav>4)
        doc.getElementById('btnTraPack').type.pointerEvents = 'none';
    if(clickCounterTrav>4)
        doc.getElementById('btnTraPack').type.shade = "#54595F";
    if(clickCounterTrav>4)
        doc.getElementById('btnTraPack').type.borderColor = "#54595F";
    if(clickCounterTrav>4)
        doc.getElementById("showResultsTra").type.visibility = "visible";
});

Right here is the remainder of code:

var clickCounterTrav = 0;

operate CounterTrav() {
  clickCounterTrav += 1;
  doc.getElementById("clickCounterTrav").innerHTML = clickCounterTrav + " Travel Pack you have Shared!";
  
    if(clickCounterTrav>4)
        doc.getElementById('btnTraPack').type.pointerEvents = 'none';
    if(clickCounterTrav>4)
        doc.getElementById('btnTraPack').type.shade = "#54595F";
    if(clickCounterTrav>4)
        doc.getElementById('btnTraPack').type.borderColor = "#54595F";
    if(clickCounterTrav>4)
    doc.getElementById("resultTraveler").innerHTML = clickCounterTrav + " Travel Pack Shared.<br>Your Stock is Over!";
  if(clickCounterTrav>4)
  doc.getElementById("showResultsTra").type.visibility = "visible";

console.log(clickCounterTrav); // 111
var CounterTrav_value = jQuery(this).attr('clickCounterTrav');
jQuery.ajax({
    url: '/wp-admin/admin-ajax.php',
        
        knowledge : {
            motion : 'CounterTrav_update', 
            CounterTrav_value : CounterTrav_value,
        },
        beforeSend: operate() {
               console.log('Updating Subject');
        },
        success : operate( response ) {
             console.log('Success');
        },
        
    });
}
</script>

console log

1
Updating Subject
Success

However in DB user_meta Did Not Replace Any

capabilities.php

add_action( 'wp_ajax_CounterTrav_update', 'CounterTrav_update' );
add_action( 'wp_ajax_nopriv_CounterTrav_update', 'CounterTrav_update' ); // This strains it is as a result of we're utilizing AJAX on the FrontEnd.

operate CounterTrav_update(){
    if(empty($_REQUEST) || !isset($_REQUEST)) {
        ajaxStatus('error', 'Nothing to replace.');
    } else {
        strive {
            $consumer = wp_get_current_user();
            $CounterTrav_value = $_POST['clickCounterTrav'];
            if ($CounterTrav_value == 'clickCounterTrav') {
                update_user_meta( $user->ID, 'clickCounterTrav', $_POST['clickCounterTrav'] );
            }
            die();
        } catch (Exception $e){
            echo 'Caught exception: ',  $e->getMessage(), "n";
        }
    }
} 

Please Are you able to Assist Me?