Why AJAX returns wrong result? - php

Question

Sometimes function reload(); does't update the div's content. I call this function when clicking a button. Sometimes only one div won't update. Random div, on a random click. Sometimes first click won't work. The div content won't show any error, just a previous not updated number. and when I click the button again it updates and shows the correct one.
Example of the bug (Increasing the #number_input by one every time I click):
div content shows: 1, 2, 2, 4
The problem is with those 2s, 3 is missing. In database the number is correct.
I'm running a local server (XAMPP). Same problem in Firefox, Chrome and IE.
No errors in firebug console. Requests are done correctly but returned value sometimes wrong. Usually only one array item is wrong, the one returned from the database.
Exactly same ajax code with different parameters (on complete) on different button works fine.
PS: Changed my var names into shorter ones so they are eye friendly
Button HTML:
<button id="xButton" class="btn btn-info">Text</button>
Button JS:
document.getElementById('xButton').onclick = function() {
var val = $('#number_input').val();
if (val > 0)
{
var xx = 1;
var yy = 1;
properties(xx, yy, val); //this updates the database by current val + val. Works correctly. Values always updated, no errors there. Clean and simple code. No way this is the source of problem.
number_input.value = 0;
xButton.textContent = ("bla bla"); //just resets the text
p1_reload();
}
}
jQuery:
function reload() {
$.ajax({
type: 'POST',
url: 'example.php',
cache: false,
data: {reload: "action"},
dataType:"json",
success: function(data) {
var xres = new Array();
xres = data;
document.getElementById("x1").textContent = xres[0];
document.getElementById("x2").textContent = xres[1];
document.getElementById("x3").textContent = xres[2];
document.getElementById("x4").textContent = xres[3];
//these two functions has not connection with the updated divs. They don't update or even read them. So, there shouldn't be any problems.
xFunction();
yFunction();
}
});
}
PHP:
if(isset($_POST['reload'])) {
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
try
{
require_once("session.php");
$auth_user = new xClass();
$user_id = $_SESSION['user_session'];
$stmt = $auth_user->runQuery("SELECT * FROM blabla WHERE user_id=:user_id LIMIT 1");
$stmt->execute(array(":user_id"=>$user_id));
$userRow=$stmt->fetch(PDO::FETCH_ASSOC);
$xxx = $userRow['xxx'];
$yyy = $userRow['yyy'];
$zzz = $userRow['zzz'];
$qqq = ($xxx * $yyy) + ($zzz + $yyy + $xxx);
$xres = array();
$xres[0] = $xxx;
$xres[1] = $yyy;
$xres[2] = $zzz;
$xres[3] = $qqq;
$result = json_encode($xres);
echo $result;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
}
Database return simple integer numbers. No triggers or decimal numbers.
jQuery version: 1.12.4 min.
Clicking every few second (no frequent clicking). Request and response complete in 10-38 ms.

Answer 1

The problem is somewhere in your button js as well as jQuery source. Try replacing textContent with innerHTML(for plain js) or html(JQuery)After replacement it would be
document.getElementById("x4").innerHTML = xres[3]; or as you are using jQuery you could have $("#x4").html(xres[3]).