iftech
asked on
JQuery to count number of characters in multiline text box doesn't run after update panel postback
Hi All,
I asked a question similar to this before and got a working solution. However It doesn't seen to work here.
I have a multi-line text in an update panel (the only one on the page). The J query counts the characters in the text box up to a max 50 and updates a label with the char count.
After 50 chars it doesn't allow anymore input into the text-box. This all works fine, until a post-back occurs caused by a drop-down in the same update panel. Then the label shows 50 out of 50 characters remaining and does not update after any more input even if the chars in the text-box are less than 50.
Here is the script:
<script type="text/javascript" language="javascript" >
$(function() {
var limit = 50;
var tb = $('textarea[id$=txtMessage ]');
$(tb).keydown(function() {
var len = $(this).val().length;
if (len > limit) {
this.value = this.value.substring(0, 50);
len = 50;
}
$('#spnCharCount').text("C haracters remaining " + (limit - len) + "/" + limit);
});
});
// add anonymous function to the page_loaded event;
// every time a partial postback occurs, the page_loaded is being executed and statements added to this event handler will execute
Sys.WebForms.PageRequestMa nager.getI nstance(). add_pageLo aded(funct ion() {
$('textarea[id$=txtMessage ]').keydow n();
});
</script>
Thanks
John.
I asked a question similar to this before and got a working solution. However It doesn't seen to work here.
I have a multi-line text in an update panel (the only one on the page). The J query counts the characters in the text box up to a max 50 and updates a label with the char count.
After 50 chars it doesn't allow anymore input into the text-box. This all works fine, until a post-back occurs caused by a drop-down in the same update panel. Then the label shows 50 out of 50 characters remaining and does not update after any more input even if the chars in the text-box are less than 50.
Here is the script:
<script type="text/javascript" language="javascript" >
$(function() {
var limit = 50;
var tb = $('textarea[id$=txtMessage
$(tb).keydown(function() {
var len = $(this).val().length;
if (len > limit) {
this.value = this.value.substring(0, 50);
len = 50;
}
$('#spnCharCount').text("C
});
});
// add anonymous function to the page_loaded event;
// every time a partial postback occurs, the page_loaded is being executed and statements added to this event handler will execute
Sys.WebForms.PageRequestMa
$('textarea[id$=txtMessage
});
</script>
Thanks
John.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Is your postback updating/overwriting those elements on which some events were binded to? If yes, then you need to re-bind all those events again.
Yes, it doesn't make a lot of sense to write the same code again. So you need to re-factor that code into a separate method and call that method from both the places
1) at document.ready event
2) at the post back method
Yes, it doesn't make a lot of sense to write the same code again. So you need to re-factor that code into a separate method and call that method from both the places
1) at document.ready event
2) at the post back method
ASKER
Thanks
How about this? I'm new to this so bare with please.
How about this? I'm new to this so bare with please.
<script type="text/javascript" language="javascript" >
$(document).ready {
MessageCount ()
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(MessageCount (){});
function MessageCount ()
{
var limit = 50;
var tb = $('textarea[id$=txtMessage]');
var len = $(tb).val().length;
$('#spnCharCount').text("Characters remaining " + (limit - len) + "/" + limit);
$(tb).keydown(function() {
var len = $(this).val().length;
if (len > limit) {
this.value = this.value.substring(0, 50);
len = 50;
}
$('#spnCharCount').text("Characters remaining " + (limit - len) + "/" + limit);
});
}
</script>
yes this looks ok.
One thing which i see here is that code other than event handlers is also there, which need not be put in common place
Please try and let me know if there is any problem.
One thing which i see here is that code other than event handlers is also there, which need not be put in common place
Please try and let me know if there is any problem.
Did my solution work for you, or are you still having problems with this?
ASKER
I'm not sure what you meant by your last comment about the common code and event handlers
The code you showed in post #33781153 should work fine, is that not working?
ASKER
Hi
Here is the code as it is now. but it doesn't work. The spnCharCount doesn't show nor update as you type.
The code in 33774034 does work.
Here is the code as it is now. but it doesn't work. The spnCharCount doesn't show nor update as you type.
The code in 33774034 does work.
$(document).ready(MessageCount());
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(MessageCount());
function MessageCount ()
{
var limit = 50;
var tb = $('textarea[id$=txtMessage]');
var len = $(tb).val().length;
$('#spnCharCount').text("Characters remaining " + (limit - len) + "/" + limit);
$(tb).keydown(function() {
var len = $(this).val().length;
if (len > limit) {
this.value = this.value.substring(0, 50);
len = 50;
}
$('#spnCharCount').text("Characters remaining " + (limit - len) + "/" + limit);
});
}
Is spnCharCount in the UpdatePanel or outside of it?
Are you getting a Javasciprt error? such as "spnCharCount is not an object"?
If so try changing line 18 to:
$('[id$=spnCharCount]').te xt("Charac ters remaining " + (limit - len) + "/" + limit);
});
Are you getting a Javasciprt error? such as "spnCharCount is not an object"?
If so try changing line 18 to:
$('[id$=spnCharCount]').te
});
ASKER
Hi,
spnCharCount is in an update panel. And I do get a java error but not on line 18. I get that error on line 10.
Thanks
spnCharCount is in an update panel. And I do get a java error but not on line 18. I get that error on line 10.
Thanks
Your declaring len twice (line 10 and line 13). I think you should just delete line 10.
Here is a good example of a character count:
http://www.ajaxray.com/blog/2007/11/09/interactive-character-limit-for-textarea-using-jquery/
Here is a good example of a character count:
http://www.ajaxray.com/blog/2007/11/09/interactive-character-limit-for-textarea-using-jquery/
ASKER
Something like this:
<script type="text/javascript" language="javascript" >
$(document).ready(function
var limit = 50;
var tb = $('textarea[id$=txtMessage
var len = $(tb).val().length;
$('#spnCharCount').text("C
$(tb).keydown(function() {
var len = $(this).val().length;
if (len > limit) {
this.value = this.value.substring(0, 50);
len = 50;
}
$('#spnCharCount').text("C
});
});
var prm = Sys.WebForms.PageRequestMa
prm.add_endRequest(functio
var limit = 50;
var tb = $('textarea[id$=txtMessage
var len = $(tb).val().length;
$('#spnCharCount').text("C
$(tb).keydown(function() {
var len = $(this).val().length;
if (len > limit) {
this.value = this.value.substring(0, 50);
len = 50;
}
$('#spnCharCount').text("C
});
});
</script>
It seems redundant to repeat the same code twice.