Is the JQuery comment box similar to Stackoverflow?
A while ago I asked how to create a prefab block of comments like Stackoverflow
The original question was found here
However, since then I have run into another issue that I'm not quite sure how to solve the problem, I'm pretty sure I get around the same as the original question, but not quite sure about the syntax.
Basically my problem is that I added a function to limit the number of characters that the user enters into a comment and I will show the remaining characters.
However, since there can be many comment fields in the list, the script is only executed for the first in the list, and I need to be dynamic.
In other words, just like the links that open the comment box in my original question, each has a unique ID.
How do I do the same for a script that controls character input.
$(function(){
$('#comment').keyup(function(){
limitChars('comment', 255, 'charlimitinfo');
})
});
Update: I got 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 takes control ...
a source to share
Your comments are added dynamically to your idea. The problem is, since you have multiples that won't work, because the unique id , so it only applies to one, so instead of fetching them by id as you have, you can just set the class as "comment" in control tags and select them that way. eg:
$(function(){
$('.comment').keyup(function(){
limitChars('comment', 255, 'charlimitinfo');
})
});
example of your text tag:
<textarea cols="20" rows="10" class="comment"></textarea>
Edit . The way that might work is that your jquery is set as it is for the condition, but each tag must have a unique name for it, or add something to the class to make it unique, but so jquery doesn't care will know it falls under the selector branch or add another number to each id tag
a source to share
I actually fixed my problem ...
The problem is that it doesn't work as expected when the second comment window opens, I forgot to assign a unique ID to the one that updates as I type with the remaining character.
<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 %>');
})
});
a source to share
You will notice that SO uses a unique identifier in the form:
<form class="post-comments" id="form-comments-459429">
.. I use a similar approach in the download control that I created. I can have a page load control and render multiple times via ajax from a partial view - every time the view is created, the form is assigned a unique ID and the jQuery script comes with it like this, in your case it might look like this:
$('#comment-1234')
.. This way, each jQuery script is only applicable to the specific form it is attached to.
a source to share