AJAX / PHP voting system: Content not updating on first click

Question

TESTING ENVIRONMENT: Windows 8 using the tool XAMMP. PHP and Mysql are up to date.

---

MY KNOWLEDGE: Starter.

---

QUESTION: I can't get the updated content immediately after the first click, only after the second, which can become pretty nasty considering I have two kind of buttons for my little voting system. Yes, I said a lot not alot : ) What is the cause for this predicament and how can I fix this?

---

WHAT I TRIED: Checked my developer tools network analysis and I get a status 200 with the correct value for every click. When using my firefox DOM inspector view I saw something unusual: upon the first click only #votes is marked in orange probably denoting that it has been affected. However, only on the second attempt on the same button both divs, #votes and #progress, get marked orange in addition with the updated values. So I expect it does on second click but not on the first one. Then I refreshed my page and tried something else. I clicked on "bad" and this time the second click landed on "good" with bad updating the value in the DOM. It seems as if the entire process is split and does not happen simultaneously which is why I speculate that:

1. Click 1: Sends data to php.
2. Click 2: Gets the data from php and displays it on the DOM.

The PHP code itself in conjunction with my database and HTML (if set to submit) works perfectly fine so I dont assume there is anything wrong on the server side. Connection to the database is set. My sessions work perfectly. No errors.

My console shows 0 javascript errors.

Test 1 : I commented out my entire php code and set up a testing variable with a simple string and changed the values in my code below accordingly. To my suprise, on clicking it immediately took the data and display the content of my testing variable.

Test 2 :: I removed the php codes from the two div tags which you will see below. They act as placeholders that show the current value before any AJAX happens. I removed those and I get an update on first click as the container was first empty. Although, on second click and toggling between good and bad happened to be a mess again.

Test 2 :: Placing jquery and my AJAX script in the head of the document did not do the job either (just to be on the safe side). Prior it was before the </body> tag

---

• I access the returned json object through my callback parameter named data which then inserts html and css via jquery into the respective div containers.

• Converted the jquery below to pure javascript but no positive change could be observed.

---

JAVASCRIPT / AJAX

function vote(type) {
    $.get('php/core/voting_system_function.php', {vote:type}, function(data) {
    $('#votes').html(data.votes_sum);
    $('#progress').css('width', data.progress);
    }, 'json');
}

---

---

HTML

• The buttons onclick event feeds the data on to the parameter within my vote functions which then sends it to {vote:type} and then to my php file. This allows me to do several checks to see if the click was either 'good' or 'bad' and substract or add data accordingly in my database.

• #votes and #progress

---

<div id="quality_meter">
    <div id="progress" style="width:<?php echo $progress ?>"></div>
</div>
<div id='votes'><?php echo $votes_sum ?></div>

---

---

• The connection to the database is correct and readable through a require.

• The script works assuming the user actually logged in as they cant access the page otherwise. As you can see I am making use of two session variables.

• As you can see, I am making checks to see which button has been clicked and query accordingly.

• The last bit of the code returns a json object through an associative array with the data stored by the variables you see there which is votes_sum and progress. I use json_encode to return the json representation of my value.

Answer 1

When you say you're not getting the response until the second click, do you mean the "votes_sum" in the votes div isn't updating with the latest votes?

The reason for this is that you calculate the $votes_sum value before you call the voting_system() function which is what updates the votes count, then after voting_system() you move the $votes_sum - unchanged - to the $output array.