PHP AJAX not updating dynamically eventhough consolelog has the correct values-CodePudding

I am trying to update $_POST['category'] with the click of a button. I'm trying to use AJAX (for the first time) to achieve this as read on multiple other pages here. My JS function currently updates the correct value in the console however it fails to actually update the POST to the correct value or at least that is wat I am assuming. I need help trying to get the value to POST so I can utilize it in PHP as a value.

MAIN PHP FILE

<div >
    <ul>
        <li  value="mobiliteit" onClick="subCat(event)">Mobiliteit</li></a>
        <li  value="kracht" onClick="subCat(event)">Kracht</li>
        <li  value="uithouding" onClick="subCat(event)">Uithouding</li>
        <li  value="stretching" onClick="subCat(event)">Stretching</li>
    </ul>
</div>

INCLUDE PHP FILE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?php  
        $_POST['category'] = '';
        var_dump($_POST['category'])
?>

JS FILE

function cat(event){
    var values = $(event.target).attr('value')
    console.log(values);

    $.ajax({
        url: "Videos.php",
        type: "post",
        data: { category: values },
        success: function (response) {
            console.log('succes');
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });
}

CodePudding user response：

Solved the issue with the help of ADyson. (Thanks my man). I added the following code $("#showmessageID").show().HTML(result) so that the div with id showmessageID updates each time on succession.

The div on my main PHP file which has the include videos.php received the ID showmessageID as to update it each time the AJAX call succeeds.

Main PHP file

<div  id="showmessageID">
<?php  include "videos.php"; ?>            
</div>

JS file

$.ajax({
    url: "http://localhost/exercise/Videos.php",
    type: "post",
    data: { category: category_SQL },
    success: function (data) {
        $("#showmessageID").show().html(data)
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }
});

Video.php

echo $_POST['category']