TEST ENVIRONMENT: Windows 8 using the XAMMP tool. PHP and Mysql updated.
MY KNOWLEDGE:.
QUESTION: I can’t get the updated content right after the first click, only after the second one, which can become rather unpleasant, given that I have two buttons for my small voting system. Yes, I said a lot not a lot :) What is the reason for this predicament and how can I fix it?
WHAT I SAID: I checked my tools for the developers of network analysis , and I get a status of 200 with the correct value for each click. When using my firefox DOM inspector view I saw something unusual: the first time I clicked, only #votes is orange, which probably means that it was affected. However, only on the second attempt on the same button, both divs #votes and #progress will be marked in orange in addition to the updated values. Therefore, I expect this to happen on the second click, but not on the first. Then I updated my page and tried something else. I clicked on "bad", and this time a second click landed on "good" with a bad value update in the DOM. It seems that the whole process is separate and does not happen at the same time, so I assume that:
- Press 1: Sends data to php.
- Press 2: Receive data from php and display it on the DOM.
The PHP code itself, in combination with my database and HTML (if set to send) works fine, so I don’t assume that something is wrong on the server side. A connection to the database has been established. My sessions work great. No mistakes.
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 accordingly changed the values in my code below. To my surprise, when clicked, it immediately took the data and displayed the contents of my test 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 AJAX happens. I deleted those, and I received the update on the first click, as the container was empty at first. Although, a second click and switching between good and bad happened again a mess.
Test 2 :: Placing jquery and my AJAX script in the head document did not work (just to be safe). Before that, it was before the </body>
I access the returned json object through my callback parameter named data , which then inserts html and css through jquery into the appropriate div containers.
Converted jquery below to pure javascript, but no positive changes were 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
buttons onclick event passes the data on the parameter to my voting functions, which then sends it to {vote:type} and then to the php file. This allows me to do a few checks to see if the click was “good” or “bad”, and subtract or add data accordingly to 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 with a query.
The script works by assuming that the user really is logged in, as they cannot access the page otherwise. As you can see, I use two session variables.
As you can see, I am doing checks to see which button was pressed and request accordingly.
The last bit of code returns a json object through an associative array with the data stored in the variables that you see there votes_sum and progress . I use json_encode to return a json representation of my value.