AJAX change comment on table row click

Question

I'm currently developing a web app that demonstrates how to "sign" different words in ASL. There's a list of terms on the left, and a video and comment section on the right.

See screenshot here: http://i917.photobucket.com/albums/ad19/brycematheson/Screen%20Shot%202015-06-16%20at%2010.05.36%20PM.png

I'm struggling to get the comments to change using AJAX whenever a new term is clicked. Currently, the comments stay the same as new terms are selected. How would I go about using AJAX to change the comment section to update when a new term is selected?

My comment section looks like so. Updating the $id_post=3 section in PHP will change the comment to match the comments with that ID in the database, so that's not an issue, I just need it to do it on the fly.

Here is my comment code in my index.php page:

<?php 
                // Connect to the database
                require_once('models/db-settings.php'); 
                $id_post = '$_POST['rowID']; //the post or the page id
                ?>
                <div class="cmt-container">
                    <?php 
                    $sql = mysqli_query($mysqli, "SELECT * FROM comments WHERE id_post = '$id_post' ORDER BY id ASC") or die(mysqli_error($mysqli));
                    while($affcom = mysqli_fetch_array($sql,MYSQLI_ASSOC)) {
                        $id = $affcom['id'];
                        $name = $affcom['name'];
                        $email = $affcom['email'];
                        $comment = $affcom['comment'];
                        $date = $affcom['date'];

                        // Get gravatar Image 
                        // https://fr.gravatar.com/site/implement/images/php/
                        $default = "mm";
                        $size = 35;
                        $grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;

                    ?>
                    <div class="cmt-cnt">
                        <img src="<?php echo $grav_url; ?>" />
                        <div class="thecom">
                            <h5><?php echo ucfirst($name); ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
                            <br/>
                            <p>
                                <?php echo $comment; ?>
                            </p>
                            <div style="float:right;"><span class="action"><a href="#" id="<?php echo $id; ?>" class="delete" title="Delete">X</a></span></div>
                        </div>
                    </div><!-- end "cmt-cnt" -->
                    <?php } ?>


                    <div class="new-com-bt">
                        <span>Write a comment ...</span>
                    </div>
                    <div class="new-com-cnt">
                        <textarea class="the-new-com"></textarea>
                        <div class="bt-add-com">Post comment</div>
                        <div class="bt-cancel-com">Cancel</div>
                    </div>
                    <div class="clearfix"></div>
                </div>

And my Javascript:

 $('#matrix tr').click(function (event) {
      var rowID = ($(this).attr('id')); //trying to alert id of the clicked row          
    $(function(){
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'index.php', 
                data: rowID,
                success: function(msg) {
                }
           });
       });
    });

What am I doing wrong? Am I missing something?

Thanks in advance.

Answer 1

You aren't actually doing anything with the page once it's returned to you

success: function(msg) {
}

When the ajax completes successfully the code inside this function will execute, whatever was returned by the page will be inside the msg param.

success: function(msg) {
    $('#comments-container').html(msg);
}

This will entirely replace the contents of the element(s) that have id="comments-container" with whatever the ajax request returned.

You might properly read the jQuery AJAX documentation page and study some of the examples. http://api.jquery.com/jquery.ajax/

Once you've fixed that you'll run into a problem where it still won't change, this is because you're not sending properly formatted POST data.

data: rowID,

In order to access the POST data like you are trying to (with $_POST[key]) the POST data also needs to be in key-value pairs.

data: "rowID=" + rowID,

Read the comments on the PHP manual page for the $_POST superglobal for a better understanding of this. http://php.net/manual/en/reserved.variables.post.php

EDIT: Oh and if you're planning on releasing this website to the public you might want to look at SQL Injection and how to harden your websites against it. As it stands this would be pretty easily broken into and your database compromised.