Question

In a project I have a stream for users, everyone can share and comment on shares. I add comments on the fly to each share. The overall structure is as below:

I’ve recently heard that using numbers for IDs are not at all a good idea, coz they’re not supported in CSS. If I change it to a class I have a new problem: I wont be able to recognize which post has been clicked (If ID is not number then I wouldn’t be able to get that particular share ID).

The code I have in jQuery is something like below:

$("div.comment").click(function(){ // Add comment link
            var jusid = $(this).attr('id');
            var content = "<textarea name='txtcomment' class='txtcomment' cols='67' rows='7'></textarea><button name='btncomment' class='btncomment'>Submit</button><div class='closecomment'>Close</div>";
            $("div#after"+jusid).html(content);
            $("div#after"+jusid).find('.txtcomment').focus();
        });

It’s actually tangled, and I’m sure it will be a mess in the near future. What is the best way to do this? How to not have a number for IDs and moreover recognize which div with what ID number has been clicked? (We need to add that comment for that specific share)

Answer 1

If I understand you correct you don’t need id’s to do that.

Sample html:

<div>
    <h3>#1333</h3>
    <p>Lorem ipsum</p>
    <a class="comment" data-postid="1333">Add a comment</a>
</div>​

Sample Java Script:

$("a.comment").click(function() {
    var $this = $(this),
        isOpen = !$this.next().length,
        $textarea;

    if (!isOpen) {
        $this.next().focus();
        return;
    }

    $textarea = $("<textarea/>");

    $this.after(
        $textarea
            .after(
                $("<button/>")
                    .text("Submit")
                    .click(
                        {$textarea: $textarea, postId: $this.attr("data-postid")},
                        submitComment
                    )
            )
            .after(
                $("<button/>")
                    .text("Close")
                    .click(/* maybe do something here? */)
            )
    );

    $textarea.focus();
});

submitComment = function (event) {
    var message = event.data.$textarea.val(),
        postId = parseInt(event.data.postId, 10);

    alert("Do something with these:\nComment: " + message + "\nPost Id: " + postId);
};

​

This will add a textarea and two buttons after the clicked comment-link (and focus on the textarea).

Style to taste 🙂

Here is a fiddle for you. (UPDATED)