0

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)

Alireza
  • 6,497
  • 13
  • 59
  • 132
  • You could start each id with an underscore and then strip it when it has been clicked. You could also just add your own custom attribute tag – My Head Hurts Jun 29 '12 at 06:58
  • Custom attribute seems great. The name of the attribute can be anything? Is that right @MyHeadHurts? Could we retrieve it with $('.myClass').attr('CustomAttr')? – Alireza Jun 29 '12 at 07:03
  • I believe you have to prefix it with `data-` for it to be valid, so it would be `data-customAttr`: http://html5doctor.com/html5-custom-data-attributes/ – My Head Hurts Jun 29 '12 at 07:08
  • HTML5 wont be cross browser. This project is in dire need of cross-browser support. – Alireza Jun 29 '12 at 07:21
  • 2
    I use them in IE7/8 without a problem and they [apparently work in IE6](http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6). It might not be classed as "valid" HTML if you use them. If you need valid HTML then you could try [this SO answer](http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag) – My Head Hurts Jun 29 '12 at 07:38
  • Numbers are fine in ids and classes, afaik - I think they just can't _start_ with a number. – halfer Jun 29 '12 at 09:37

2 Answers2

1

You can place a id of the post in one hidden field inside the post. This way you will be able to retrieve the id of the post when clicked on it.

[Edit]

Suppose you have a html structure like:

<div class='comment'>
  <input type='hidden' class='post_id' value='1'/>
</div>
<div class='comment'>
  <input type='hidden' class='post_id' value='2'/>
</div>
<div class='comment'>
  <input type='hidden' class='post_id' value='3'/>
</div>

You can have your jQuery something like:

$("div.comment").click(function(){
          var clicked_post_id = $(this).find('input.post_id').val();

          // Perform other operations with the above retrieved clicked_post_id

});

DEMO at http://jsfiddle.net/7wCJK/2/

sushil
  • 2,641
  • 3
  • 18
  • 24
  • Then when we say $('.thatClass').val() with will be in the wrong direction. Because we have many elements like .thatClass in the stream. – Alireza Jun 29 '12 at 06:53
  • How do you know to retrieve which? – Alireza Jun 29 '12 at 06:53
  • thanks for your answer and patient. As you see in jQuery Code in my question `div.comment` is not a wrapper. it's actually a button (a link) – Alireza Jun 29 '12 at 09:30
  • In case its a button, you can have hidden field just next to the button and retrieve using .next() function of jQuery. – sushil Jun 29 '12 at 09:42
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)

Per Salbark
  • 3,597
  • 1
  • 23
  • 24
  • `.After()` will append more and more textboxes to the form. And in your example I can't fetch the share id! You have just pasted in h3! – Alireza Jun 29 '12 at 09:20
  • I need to fetch ID of the post to know what post this comment belongs to. – Alireza Jun 29 '12 at 09:21
  • Ok. That functionality was not in your own code, but I edited my answer for you. – Per Salbark Jun 29 '12 at 09:28
  • this part in my code: `var jusid = $(this).attr('id');` fetch the ID of the DIV which is the ID of the post. – Alireza Jun 29 '12 at 09:31
  • This is about my answer. how to prevent adding more textboxes when we click `Add Comment`? your code produce more and more textboxs, button, etc/ – Alireza Jun 29 '12 at 09:35