Comment System - On a Concatenation

Juniper747 · 04-19-2012, 06:39 PM

I have concatenated list of posts, whereby a user can comment on each one (and the comment gets a live update via jquery). I decided that since I'm using a unique variable for each post, I could just tack that onto the end of the id of the update div, and also tack it onto the end of the class of the submit button, like so:

PHP Code:


			
$my_list .= '

    <form action="#" method="post">

        <textarea class="commentbox" name="comment" id="comment"></textarea>

        <input type="hidden" name="post_id"  id="post_id" value=' . $post_id . ' />

        <input type="hidden" name="member_id" id="member_id" value=' . $id . ' />

        <input type="submit" class="submit' . $post_id . '" value="Comment " />

    </form>

    ' . $comment_list . ' // existing comments queried from the db

    <ol id="update' . $post_id . '"></ol> // jquery-ed live update comments

';

?>

Everything with respect to the above looks fine (i.e. each submit button gets a unique class and each update div gets a unique id).

So the problem I'm running into now is: how do I get my js function to recognize each of the unique "submits"? This is what I have now (below). But whenever I click on a submit button next to a post, nothing happens, my page just reloads and a "#" gets added to the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct unique $post_id... but I believe it's stopping at the js function.

Code:

<head>
<script type="text/javascript">
$(function() {
    $(".submit<?php echo $post_id; ?>").click(function() {
        var post_id = $("#post_id").val();  // this is the unique id for each story, in a hidden input
        var member_id = $("#member_id").val();  // this is a member for the commenter, in a hidden input
        var comment = $("#comment").val();  // this is the comment from the input box
        var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;   
        if(comment=='') {
            alert('Please enter a valid comment');
        } else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
            $.ajax({
                type: "POST",
                url: "commentajax.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("#update<?php echo $post_id; ?>").append(html);
                    $("#update<?php echo $post_id; ?> li:last").fadeIn("slow");
                    document.getElementById('post_id').value='';
                    document.getElementById('member_id').value='';
                    document.getElementById('comment').value='';
                    $("#comment").focus();
                    $("#flash").hide();
                }
            });
        }
        return false;
    });
});
</script>
</head>