While Loop, jQuery and AJAX mysql query

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!';
}

?>

If you are going to include jquery.js, at least use it! api.jquery.com/jQuery.ajax — Byron Whitlock
– Byron Whitlock, Commented Aug 2, 2012 at 20:26
First file does contain it and I do plan on using jquery ui later on. Best to insert it in the beginning of creating code before I forget later on and troubleshoot it to oblivion. You have no idea how many times that has happened to me. $(document).ready(function() — thank_you
– thank_you, Commented Aug 2, 2012 at 20:32
lol. He means your whole AJAX statement/load function can be condensed into 2-3 lines — Tim Withers
– Tim Withers, Commented Aug 2, 2012 at 20:39
My apologizes Byron. This is my third day learning AJAX. I'll get to it soon. I just want to fix this first. — thank_you
– thank_you, Commented Aug 2, 2012 at 20:44

Tim Withers · Accepted Answer · 2012-08-02 20:50:03Z

3

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!

answered Aug 2, 2012 at 20:50

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thank_you Over a year ago

I did everything per instructions. I received the following firebug error when I clicked on a button to delete a message. ReferenceError: key is not defined [Break On This Error] $.get(thefile+key,function(responseText){ Do I need to alter the variable when it is created in order for it to be recognized by the $.get() jquery code?

thank_you Over a year ago

Awesome. Thanks for the help. Will start learning jquery ajax now!

Collectives™ on Stack Overflow

While Loop, jQuery and AJAX mysql query

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related