While Loop, jQuery and AJAX mysql query - php

Question

I'm working on a message system where users submit one response to another user. The receiver then views all of his messages in a while loop. I created a delete button that will delete the whichever message the delete button is linked to. I have two problems. First, the delete button does not work, and second, when it was working (it no longer is) the while loop was linking all the delete buttons to the first message and not individually to each message the while loop produced. Also, I'm aware that mysql is deprecated. Will be making the transition over soon.
Here is the first code:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" >
function load(thefile, thediv) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject ('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', thefile + key, true);
xmlhttp.send();
}
</script>
<?php
while($ergo_data = mysql_fetch_assoc($ergo_query_result)) {
echo 'Message: ' . $ergo_data['ergo'] . '<br>';
echo 'From: ' . username_from_user_id($ergo_data['user_id_seeker']) . '<br>';
echo 'Time submitted: ' . $ergo_data['ergo_time_submitted'] . '<br><br><br><br>';
echo $ergo_data['primary_key'];
?>
<div class="changes">
<input type="button" value="delete" class="<?php echo $ergo_data['primary_key']; ?>"
name="<?php echo $ergo_data['user_id_seeker']; ?>"
onclick="load('ajax_ergo_list.php?key=',
'delete');">
</div>
<script type="text/javascript" >
$(document).ready(function(){
var key = $(".changes :input").attr("class");
alert(key);
});
</script>
<br>
<br>
<br>
<?php
}
?>
<div id="delete"></div>
Here is the second file containing what I want to happen when the button is pressed.
if (isset($_GET['key'])) {
$key = sanitize($_GET['key']);
}
if (!empty($key)) {
$query = "DELETE FROM `ergo` WHERE `primary_key` = '$key'";
$query_run = mysql_query($query);
echo 'Deleted!';
}
?>

Answer 1

Ok, first off, this is all sorts of crazy code you got going on here...
<script type="text/javascript" >
$(document).ready(function(){
var key = $(".changes :input").attr("class");
alert(key);
});
</script>
You have your script inside a while loop. That will alert as many times as the loop is. And that is really all the function does. It's not setting a global variable or anything.
In regards to jQuery, use it:
function load(thefile, thediv) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject ('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', thefile + key, true);
xmlhttp.send();
}
Condense that to this:
function load(thefile, thediv) {
$.get(thefile+key,function(responseText){
$('#'+thediv).html(responseText);
});
}
In regards to your question about the delete function:
<div class="changes">
<input type="button" value="delete" class="<?php echo $ergo_data['primary_key']; ?>"
name="<?php echo $ergo_data['user_id_seeker']; ?>"
onclick="load('ajax_ergo_list.php?key=',
'delete');">
</div>
Your onclick is the javascript that is firing. You have the first variable set to the link and the second to the action I am guessing? In your function code, the second variable is supposed to be the div where the info is displayed. The key is no where to be found. Try doing this instead:
<div class="changes">
<input type="button" value="delete" class="<?php echo $ergo_data['primary_key']; ?>"
name="<?php echo $ergo_data['user_id_seeker']; ?>"
onclick="load('ajax_ergo_list.php?key=<?php echo $ergo_data['primary_key'];?>',
'delete');">
</div>
And your load function to this:
function load(thefile, thediv) {
$.get(thefile,function(responseText){
$('#'+thediv).html(responseText);
});
}
Good luck!