While I have come across a similar question on StackOverflow, the focus of the answer was primarily on jQuery.
How can I retrieve the response from an asynchronous call?
The challenge I am facing involves implementing a JavaScript function that enables users on a website to vote once a day. To achieve this, I need to execute another JS function that makes an AJAX call to a PHP page, which then queries the database to determine if the user has voted in the last 24 hours.
function can_vote(user_id)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "rating.php?&user_id=" + user_id, true);
xmlhttp.send();
var result = true;
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
console.log("answer: " + xmlhttp.responseText);
return (xmlhttp.responseText == "false") ? false : true; // does not work as expected
}
}
}
function rating(user_id)
{
if (can_vote(user_id) == false)
{
// display error message
...
return false;
}
...
}
After exploring suggested solutions without using jQuery, I attempted to implement a callback system:
can_vote(callback, user_id)
{
...
xmlhttp.onreadystatechange=function()
{
// Call the callback function upon receiving a positive response from rating.php
callback();
}
}
function rating(user_id)
{
var result = false;
can_vote(function() {
result = true;
}, user_id);
console.log(result); // always shows false
...
}
Although the mechanism functions correctly, it fails to update the variable 'true,' appearing to be confined within the local scope of the callback function.
Despite being close to a solution, I remain stuck. Passing variables by reference in JS did not yield the desired outcome in my situation.
I kindly seek assistance and suggestions for fixing this issue exclusively using JavaScript.
EDIT 1:
While the comprehensive answer provided at How can I retrieve the response from an asynchronous call? is informative, it relies on jQuery rather than pure JavaScript.
EDIT 2 and SOLUTION:
Unable to post my own answer due to technical constraints, I acknowledge overlooking key aspects before posing the question. Thank you all for the responses.
- Apologies for the duplication with the linked question above.
- Egg Vans recommended reevaluating the problem, which indeed offers a viable approach. By modifying the PHP page handling the voting system to directly invoke a PHP function upon user interaction, we can bypass AJAX altogether. However, complex DOM function calls are necessary to identify the chosen star count, rendering this solution impractical.
- The failure lies in my oversight regarding how the result of an AJAX call should be processed within a JS function. The actual processing occurs within the callback function. If a user can vote, actions specific to this scenario should be executed within the callback, while alternative actions apply if voting is not permitted.
To illustrate, consider the following:
function can_vote(callback, user_id)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "rating.php?user=" + user_id, false);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
// Process the result within the callback function according to the received response
callback(xmlhttpx.responseText);
}
}
}
function star_rating(user_id)
{
...
can_vote(function(result)
{
if (result == false)
{
// Display error message as voting is disabled
}
else
{
// Allow voting - proceed with necessary actions such as updating ratings in the database via AJAX call
}
}, user_id);
// Any code after this line may execute before the AJAX call returns
...
}
Thank you for your patience and understanding. Hopefully, this specific example will aid others in resolving similar challenges.