AJAX request not Updating in the UI but updates on the console
the voting AJAX request is not updating on the ui while it is updating on the browser network and the console. Pls how can i fix it
function upVote( id) {
$.ajax({
type: "POST",
// url: "/wp-content/plugins/anspress-question-answer/templates/votesystem/scripts.php",
url: "/scripts.php",
data: {
// action: 'my_custom_action',
up: id,
user: <?php echo $userid; ?>,
question_id:<?php echo $question_id;?>
},
beforeSend: function(){
$('#links-'+id+' .btn-vote').html("<img src='loaderIcon.gif' height='16px'>");
},
success: function(data){
// $('#data').html(data);
console.log(data);
console.log(data.data);
$('#up_count'+id).html(data.data.up_count);
$('#down_count'+id).html(data.data.down_count);
// alert(data.message);
// Reload the page after the OK alert
// location.reload();
// return false; //This is commented for reload (PPE)
},
error: function(error) {
// Handle errors
console.log(error);
alert(error.message);
// showSnackbar(error.message);
}
});
}Your AJAX is updating on the network and console, so the backend is fine.
The issue is almost always either JSON not being parsed or DOM not matching the selector.
First, make sure you set dataType: "json" in your $.ajax call so that data.data.up_count is actually accessible, because otherwise jQuery treats the response as a string and your .html(data.data.up_count) won’t work.
Next, double-check that your PHP is returning proper JSON using json_encode with a structure like { "data": { "up_count": 5, "down_count": 2 } }, otherwise the frontend won’t find those values. Also verify your HTML IDs match exactly (up_count + id and down_count + id), because even a small mismatch will prevent the UI from updating even though the request succeeds.
If all of that is correct, the update should work immediately without needing a page refresh. level devil