Link to home
Start Free TrialLog in
Avatar of iftech
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("Characters 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.PageRequestManager.getInstance().add_pageLoaded(function() {
       $('textarea[id$=txtMessage]').keydown();
     });
</script>

Thanks
John.
ASKER CERTIFIED SOLUTION
Avatar of CtrlAltDl
CtrlAltDl
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of iftech
iftech

ASKER

Thanks for the response

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("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);
            });
        });              
             
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function() {
            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>

It seems redundant to repeat the same code twice.
Avatar of Gurvinder Pal Singh
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
Avatar of iftech

ASKER

Thanks

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>

Open in new window

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.
Did my solution work for you, or are you still having problems with this?
Avatar of iftech

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?
Avatar of iftech

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.
$(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);
   }); 
}

Open in new window

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]').text("Characters remaining " + (limit - len) + "/" + limit);
   });

Avatar of iftech

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
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/