JQuery comment box similar to Stackoverflow?

Question

A while ago I had asked how to make a collapsible comment box like Stackoverflow

The original question is found here

However since then I came across another problem which I am not entirely sure how to go about solving, I am pretty sure that I go about it the same way as the original question but, not quite sure of the syntax.

Basically what my problem is, is that I added a function to limit the # of characters the user enters into the comment and I show the characters remaining.

However because there can be many comment boxes in the list the script is only being executed for the first one in the list, and I need to to be dynamic.

In otherwords just like the links that open the comment box in my original question, each one has a unique id.

How do I do the same for the script that monitors the character input.

$(function(){
    $('#comment').keyup(function(){
     limitChars('comment', 255, 'charlimitinfo');
    })
});

Update: I did get them to be dynamic by doing something like this

$(function(){

    $('.comment-<%=ViewData.Model.Entry.EntryID %>').keyup(function(){
     limitChars('comment-<%=ViewData.Model.Entry.EntryID %>', 255, 'charlimitinfo');
    })
});

However when you open one and then open another the second one takes control...

Answer 1

To my idea your comment boxes are added dynamically. The problem is that since you have multiples ones that won't work because an id is unique so it only applies to one, so instead of selecting them by id as you have, you can just set the class as "comment" in the control tags and select them that way. ex:

  $(function(){
   $('.comment').keyup(function(){
    limitChars('comment', 255, 'charlimitinfo');
   })
});

your text tag example:

  <textarea cols="20" rows="10" class="comment"></textarea>

Edit The way that can work is keep your jquery set the way it is for the condition, but each tag have to have a unique name to it, either add something to the class to make it unique, but so the jquery will still know it falls under the selector branch or append a different number to each id tag

Answer 2

Your selector needs to be on css class $(".comment") rather than id $("#comment").

Answer 3

I actually fixed my own issue...

The problem of it not working properly when a second comment box was opened was I forgot to assign a unique ID to the that gets updated as you type with the character count left.

<script language="javascript">
function limitChars(textid, limit, infodiv)
{
    var text = $('.'+textid).val(); 
    var textlength = text.length;
    if(textlength > limit)
    {
     $('#' + infodiv).html('You cannot write more then '+limit+' characters!');
     $('#'+textid).val(text.substr(0,limit));
     return false;
    }
    else
    {
     $('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');
     return true;
    }
}

$(function(){

    $('.comment-<%=ViewData.Model.Entry.EntryID %>').keyup(function(){
     limitChars('comment-<%=ViewData.Model.Entry.EntryID %>', 255, 'charlimitinfo-<%=ViewData.Model.Entry.EntryID %>');
    })
});

Answer 4

You'll notice SO uses the unique id's in the form like so:

<form class="post-comments" id="form-comments-459429">

..i use a similar approach in an upload control i have created. I can have the upload control rendered many times onto a page and its rendered in via ajax from a partial view - each time the view is created the form is assigned a unique id and the jQuery script comes with it so, in your case it might look like this:

$('#comment-1234')

..this way, each jQuery script only applies to the particular form it's 'attached' to.