Update MySQL table with button without refreshing page using ajax

Update MySQL table with button without refreshing page using ajax

I am trying to update a value in a database without refreshing the page
using AJAX. I am completely new to AJAX but I have have managed to create
a function after searching for answers on Stackoverflow but I am unable to
make it work.
One the main page...
<script type="text/javascript" src="/js/jquery.js"></script>
<script>
function UpdateRecord(id)
{
jQuery.ajax({
type: "POST",
url: "del_reason.php",
data: 'id='+id,
cache: false,
success: function(response)
{
alert("Record successfully updated");
}
});
}
</script>
The button (which is in a form)
<input type="button" name="delete_pos" value="Delete" class="delRow_pos"
onClick="UpdateRecord(<? echo $row['reasonID']; ?>);"/>
The contents of del_reason.php
$var = @$_POST['id'] ;
$sql = "UPDATE gradeReason SET current = 0 WHERE reasonID = $var";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));
//added for testing
echo 'var = '.$var;
The database connection is ok because other functions on the same page
connecting to the database work fine and so do other jquery functions but
when the button is clicked the alert says the record is upodated but it
isn't