Question

I want to create a system of reporting/flagging comments.

At this point Im just getting it to send the commentid to a field inside a hidden div and the pop that div up next to the clicked “flag” link. (taken from :How to position one element relative to another with jQuery?)

I have something like this along each comment:

<a class="flag" id="flag-post-@(item.ID)">flag</a>

and this for my jquery:

$(".flag").click(function () {

            var commentId = $(this).attr('id');
            $("#comment-id-label").val(commentId);


            //get the position of the placeholder element
            var pos = ("#"+commentId).offset();
            var width = ("#"+commentId).width();
            //show the menu directly over the placeholder
            $("#menu").css({ "left": (pos.left + width) + "px", "top": pos.top + "px" });
            $("#menu").show();
        });

<div style="position: absolute; display: none;" id="menu">
           <input id="comment-id-label"   type="text" value="" />
</div>

but its not working any ideas?

Answer 1

You are missing the jQuery alias $ at two places.

I did some tweaking, and got this to work:

$(".flag").click(function () {

    var commentId = $(this).attr('id'),
        comment = $("#"+commentId);

    $("#comment-id-label").val(commentId);

    //get the position of the placeholder element
    var pos = comment.offset();
    var width = comment.width();

    //show the menu directly over the placeholder
    $("#menu").css({
        "left": pos.left+width,
        "top": pos.top
    }).show();
});