Utilizing AJAX to send a request to another php page and retrieve the result of a query, I originally used xmlhttprequest to pass the php logic along with the query information. However, I wanted to separate the presentation logic from the actual code logic by storing the query results in an array and passing it down to my javascript function through ajax.
My goal is to populate a drop-down list with the contents of this array. Despite attempting json encode, I am facing some difficulties.
Here is the code for the requested php page:
<html>
<head>
</head>
<body>
<?php
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);
$con = mysqli_connect('*******','********','******','****');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
$j = mysqli_real_escape_string($con, $_GET['j']);
mysqli_select_db($con,"4h");
$sql="SELECT nombreClub FROM club4h WHERE oficinaLoc LIKE '%".$j."%'";
$result = mysqli_query($con,$sql);
while($row = $result->fetch_array()) {
$response[] = $row;
}
file_put_contents('getnombre.php',json_encode($response));
mysqli_close($con);
?>
</body>
</html>
Below is my javascript function:
function loadDoc(url, cfunc, sel){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4 && xhttp.status == 200){
cfunc(xhttp);
}
}
xhttp.open("GET", url +sel, true);
xhttp.send();
}
function selClub(xhttp) {
document.getElementById("nombreClub").style.display = "inline";
var optData = <?php file_get_contents('getnombre.php'); ?>;
var newClub = document.getElementById("addClub");
newClub.type = "text";
document.getElementById("addOption").style.display = "inline";
$("#addOption").click(function(){
$("#nombreClub").append('<option value="' + $("#addClub").val() + '">' + $("#addClub").val() + '</option>');
$("#nombreClub").last().focus;
});
}
I trigger this function with an onchange event when a user selects a value from a previous drop-down list. The options in this specific drop-down list are populated based on the selection made. While I understand how to add options to the list, I am facing challenges in transferring data from the php page to javascript without resorting to directly echoing html elements.