How to organize user's shares to easily add comments to that particular post?


Tags: jquery,css

Problem :

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:
enter image description here

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)



Solution :

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)


    CSS Howto..

    How do I make a symmetrical downward pointing angle that is greater than 90 degrees using CSS?

    CSHTML - How to I make the unordered list items horizontal?

    How can I make a fixed background image not stay fixed on scroll?

    How to do multiple class selectors in Stylus CSS pre-processor

    How to export only the used css from a site?

    How to center a child element in CSS, even if it is larger than the parent?

    How to Modify the StrongLoop's LoopBack Explorer CSS

    How to access element inside div in jquery and make exanding div transparent

    How to use css media query to switch animations

    How to align colon vertically using css?

    How to close the menu after click third layer menu item

    How to change css style of input and some text in one function?

    How to center three DIVS with other HTML tags inside one parent DIV [duplicate]

    how can I combine button with input?

    CSS How to hide text after a span

    How to replace a Font Awesome icon within link text with a different icon on link click?

    How to align dropdown sub menu?

    PNG background image not showing in IE 8< using html5?

    How to prevent CSS table row expanding to parent height

    how to create arrow down/up in css

    How to remove css from DOM

    How to use Vendor Properties in Multiple Backgrounds?

    How do I make this type of layout with CSS? [closed]

    How to get tr:nth-child which has css applied

    HTML/CSS How to have to tags on same line?

    CSS: How to get an animated gif background-image on top of a div

    How to set the jquery draggable with margin left?

    How to achieve this layout with div and css?

    How to make a sliding dashboard similar to medium.com? [closed]

    How to make my popup window dead center no matter what width it is