Question

i have this bit of html.
(Link at bottom)

Its output of php code for status updates, it has view comments and post comment link, the post comment link uses jquery to add a textarea and submit button below that status update. and the view comments shows the comments to that status update below that status update.

So i use php looping so there will be obviously more than 1 status updates at most times(depends on how much friends users have) so i cant have an element like ‘textelement’, i will need to have elements like ‘textelement1’ and ‘textelement2’
So i used php to add the id of the status update in the end of the links like _id so the element id becomes view_comments_1.

So i want to use jquery to find out which element has been clicked so that i can add a text box and show comments below the right status update instead of showing it below all status updates.

HTML

<div class="wrapbg">

    <span class="corners-top"><span></span></span>
    <div id="content"><br/>
        Whats new?
        <hr class='hr1'>

        <div class='stbody' id='stbody'>

            <div class='stimg'>
                <img src='uploads/profile_pics_small/Anonymous_Blueprint_Wallpaper_by_co.jpg' /></img>
            </div>
            <div class='sttext'>
                Welcome yoall!!
                <div class='sttime'>By LUcase</div>
                <br><br>

                <a href=''>0 Likes</a> <a href=''>1 Dislikes</a>
            </div>
            <a href=''>unDislike</a> <a id='comment_now_1' href=''>Comment</a> <a id='view_comments1' data-id-1 = '1' href=''>View comments</a> <div id='emptydiv1'> </div></div>
        <div class='stbody' id='stbody'>

            <div class='stimg'>

                <img src='uploads/profile_pics_small/wood_texture_by_pabloalvin-d1igijr.jpg' /></img>
            </div>
            <div class='sttext'>
                hi
                <div class='sttime'>By nicknick</div>
                <br><br>
                <a href=''>0 Likes</a> <a href=''>0 Dislikes</a>
            </div>
            <a href=''>Like</a> <a href=''>DisLike</a> <a id='comment_now_4' href=''>Comment</a> <a id='view_comments4' data-id-4 = '4' href=''>View comments</a> <div id='emptydiv4'> </div></div></div>

    <span class="corners-bottom"><span></span></span>
</div>

JavaScript

    //Gotta find out which status update we are dealing with!
    jQuery("document").ready(function(){
        jQuery(".likebtn").click(function(e) {
            var id=jQuery(this).attr("data-id");
            jQuery.post('like.php', {'id': id}, function(data) {
                alert("Your like.php has been called");
            }, "json");
            e.preventDefault();
        });
        jQuery(".dislikebtn").click(function(e) {
        });

//gotta figure out which status update we are dealing with!
//attache the click event to the anchor tag
        $("#comment_now").live("click",function(e){
            //prevent the default behaviour of following the link
            e.preventDefault();
            $("#comment_now").remove();
            //find the textarea element, and after it, put an input tag
            $(".sttext").after('<textarea id="comment_text" name="comment"></textarea> <br> <button id = "post_button" class="action greenbtn"><span class="label">Comment</span></button> <a id="cancel_comment" href="">Cancel</a> <br id="com_spacing">');
        });



//gotta figure out which status update we are dealing with!
        $("#cancel_comment").live("click",function(event){
            event.preventDefault();
            $("#comment_text").remove();
            $("#cancel_comment").remove();
            $("#post_button").remove();
            $("#com_spacing").remove();
            $("#view_comments").before('<a href="" id="comment_now">Comment</a> ');
        });

        $("#view_comments").live("click", function(e){
            e.preventDefault();
            var id=jQuery(this).attr("data-id");
            $.ajax({

                url: 'query_comments.php?status_id='+id,
                beforeSend: function( xhr ) {
                    xhr.overrideMimeType( 'text/plain; charset=UTF-8' );
                },
                success: function( data ) {
                    $('#emptydiv').html(data);
                }
            });
        });
    });

Please help me out 🙂

Answer 1

add a class to to action buttons and pass the comment id as data attribute like so:

<a class="commentBtn" href='' data-commentid="1">Comment</a>

and than you can read out the id easily with jquery:

$(".commentBtn").live("click",function(e){
var id = $(this).data('commentid');
e.preventDefault();
// do something with id…
});