'Passing variables to php and using ajax to update mysql and refresh the TD that contains the clicked button?
I'm annoyingly back again with a problem with my admin page. I pull data from the database and generate an html table with the data. I haven't decided what columns i'll display in the final draft but nonetheless, the last column is a button to give/remove admin status.
The basic idea is that when you click the add/remove buttons it changes the boolean value in the database and refreshes that TD, I was thinking this could be done through ajax but I haven't been able to figure out how to target the dynamically generated ID's or maybe I should use the parent of the click target? I'm afraid I'm in the proverbial tutorial hell so I'm unsure of everything anymore.
In the mysql, the is_admin column is a boolean and to generate the button I did
for(let i = 0; i < data.length; i++) {
let tr = document.createElement("tr");
let row = `
<td name="id" id=id-${data[i].id}>${data[i].id}</td>
<td name="name" id=name-${data[i].username}>${data[i].username}</td>
<td name="password" id=pass-${data[i].password}>${data[i].password}</td>
<input type="hidden" name="is_admin" value=${data[i].is_admin} id=${data[i].is_admin}>
<td>${data[i].is_admin == 1 ? "<button class='remove'>Remove Admin</button>" : "<button class='add' >Add Admin</button>"}</td>
`;
tr.innerHTML = row;
tr.classList.add("local");
table.appendChild(tr);
}
I'm trying to make it so if you're an admin, there's a "Remove Admin" button and if you're not, an "Add Admin" button displays, which works. But when you click the Remove admin button, It needs to update the is_admin for that user, which I assume I can do with with an sql UPDATE. Currently my function to give admin is
function addAdmin() {
let xhr = new XMLHttpRequest();
xhr.open("post", "add-admin.php", true);
xhr.setRequestHeader('Content-type', 'application/x-www.form.urlencoded');
xhr.onload = function() {
if(this.status == 200) {
console.log(this.responseText);
}
}
xhr.send();
}
As you can see, there's nothing going on yet because I'm not sure how to get the data to the php to update the database. Also, I'm using xhr because I haven't learned any jquery. Currently the php just echo's some text, and it does log it to the console. I'm lost past that though. I don't know how I'm supposed to pass the javascript variables, in this case ${data[i].is_admin}, to the php. I think I should be able to wrap the TR in a form tag that might let me pass it via POST?
Not that it's doing anything but the php currently is
<?php
session_start();
include("../../connection.php");
include("../../functions.php");
$user_data = check_login($conn);
?>
<script src="users-test.js"></script>
<?php
if(!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
else {
echo "Admin Added";
}
?>
I added the script tags to the php because I read online that you could do that but even if you can, I'm still lost on how to access the variables through php. I had seen somewhere you could so something like
let variable = <?php $phpvariable ?>;
to bring a php variable into javascript but i can't seem to figure out how to go the other way with it.
document.addEventListener('click',function(e){
if(e.target && e.target.className == 'add'){
console.log("add clicked");
addAdmin(e);
} else if (e.target && e.target.className == 'remove'){
console.log("remove clicked");
removeAdmin(e);
}
});
Edit to add event listener code
This project has definitely pushed me out of my comfort zone which I suppose is a good thing, I just hate feeling like I need to ask questions with nearly every other line of code for it. Sorry for the noob questions, I'm just a noob trying to not be a noob anymore.
Learn javascript they said. It'll be fun they said...
Anyway, thank you for your time. Sorry if some of the text overlaps, This was partially written last night and finished this morning when I woke up. Thank you again.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
