Hello,
I’m struggling to get my AJAX call working and I think it has to do with how I’m encoding decoding everything. Let me post the code:
If anything pops out to anyone as to why the AJAX isn’t working please let me know, I’m about to go crazy.
Well, taking a look at you code it looks like you are mixing PHP, JavaScript and Ajax all together.
Below is Fetch which is simpler to use than working with XHR Requests and you don’t have to work with nested callbacks. jQuery has the $.get(url)
/*
* Grab Records (Questions and Answers) from the MySQL Table
* using Fetch (AJAX)
*/
const quizUISuccess = function (parsedData) {
const records = parsedData.length;
container.setAttribute('data-records', records);
display(parsedData);
};
const quizUIError = function (error) {
console.log(error);
};
/*
*
* @param {type} response
* Throw error response if something is wrong:
*
*/
const handleErrors = function (response) {
if (!response.ok) {
throw (response.status + ' : ' + response.statusText);
}
return response.json();
};
/*
*
* @param {type} url
* @param {type} succeed
* @param {type} fail
*/
const createRequest = function (url, succeed, fail) {
fetch(url)
.then((response) => handleErrors(response))
.then((data) => succeed(data))
.catch((error) => fail(error));
};
const selectCat = function () {
const requestUrl = quizUrl + 'category=' + d.querySelector('#category').value;
createRequest(requestUrl, quizUISuccess, quizUIError);
};
Then I do this with my php database file I call quizdatabase.php
<?php
require_once '../private/initialize.php';
use Library\Trivia\Trivia;
/* Makes it so we don't have to decode the json coming from JQuery */
header('Content-type: application/json');
$trivia = new Trivia();
$category = htmlspecialchars($_GET['category']);
if (isset($category)) {
$data = $trivia->read($category);
output($data);
}
function errorOutput($output, $code = 500) {
http_response_code($code);
echo json_encode($output);
}
/*
* If everything validates OK then send success message to Ajax / JavaScript
*/
function output($output) {
http_response_code(200);
echo json_encode($output);
}
There’s no HTML in the PHP portion of the AJAX/JSON file as all you are doing is echoing the encoded data back to the AJAX and in my case it is the FETCH routine. In your case it would be the Array that you are working with.
I’m making my own trivia game that uses an array that I get back from a MySQL Database Table and the code looks something like such:
const display = function (data) {
//console.log('Data Array', data);
d.querySelector("#categories-form").style.display = "none";
var
count = 0,
records = container.getAttribute('data-records'),
textContainer = d.getElementById('textContainer'),
clock = textContainer.appendChild(d.createElement('h2'));
textContainer.style.display = 'block';
clock.id = 'clock';
//console.log('Total Records', records);
for (var i = 0; i < records; i++) {
console.log(data[i]);
var
idIndex = i + 1,
mainGame = container.appendChild(d.createElement('div')),
screen = mainGame.appendChild(d.createElement('div')),
q = screen.appendChild(d.createElement('h2')),
ansArray = [data[i].answer1, data[i].answer2, data[i].answer3, data[i].answer4];
mainGame.id = 'mainGame' + idIndex;
mainGame.setAttribute('data-id', data[i].id);
screen.className = 'screen';
q.id = 'question' + idIndex;
q.appendChild(d.createTextNode(data[i].question));
for (var j = 0; j < 4; j++) {
var
button = mainGame.appendChild(d.createElement('button'));
button.setAttribute('data-correct', j + 1);
button.className = 'buttonStyle';
button.id = 'button' + (++count);
button.appendChild(d.createTextNode(ansArray[j]));
} // for j
}
d.querySelector('#mainGame1').style.display = "block";
};
I hope this helps a little…