Question

Im trying to make something like this http://demos.99points.info/facebook_wallpost_system/ which is a comment system. I have the ajax code below except i don’t know how to uniqely select textareas. The challenge is that the number of posts is variable so all of the posts need to be uniquely identified so that when the data is put into the database i know which post it relates to.

JQUERY:

<script type='text/javascript'>
$('document').ready(function(){

$('.commentContainer').load('../writecomment.php');
        //commentContainer is a class so it applies to all of the textareas, but i need this selector to be unique

$('.submitCommentBox').click(function(){

            //these are the selectors that i can't get to work right
    var comment = $('').val();
    var postid = $('').val();


    $.post('../comment.php',
    {

    comment: comment,
    postid: postid,



    },
    function(response){

        $('#commentContainer').load('../writecomment.php');
        $('.commentBox').val('');

    }

    }

    return false;

}):

});

</script>

HTML/PHP

<?php while ($row=mysql_fetch_assoc($query)){

echo"
<p name='singlePost'>$post[$f]</p>
<div id='commentContainer'></div>
<textarea class='commentBox'></textarea>
<input type='button' value='submit' class='submitCommentBox'>";
 }

basically the HTML/PHP generates for each post on the page as to create a textarea and subimt button for each post. therefore the user can comment on each post.

Answer 1

Using the markup in the link you provided, I would do something like:

var container  = $(this).closest('.friends_area');

var comment    = $(container).find('.commentbox').val();
var questionid = $(container).find('#hidden').val();
var answerid   = $(container).find('').val();

---

A more correct solution would be something like:

HTML

<div id="posting">
    <form method="post" action="">
        <input type="hidden" name="record_id" value="123" />
        <textarea name="comment"></textarea>
        <button type="submit">Comment</button>
    </form>

    ...
</div>

JS

$('#posting').on('submit', 'form', function(e) {

    e.preventDefault();

    var form = $(this).closest('form');

    $.post($(form).attr('action'), $(form).serialize(), function() {
        $('#commentContainer').load('../writecomment.php');
        $('.commentBox').val('');
    });
});