Character Limit not working inside update panel

Question

I'm using Jquery plugin called Limit as below

    $(document).ready(
    function () {
        $('[id$=Textarea1]').limit('150', '#charsLeft');
    });

Relevant ASPX section,

<td align="left" valign="top">
    <textarea id="Textarea1" class ="limit" runat="server" rows="4" cols="30" style="resize: none;
        background-color: #F9E8EC; font-family: 'Times New Roman', Times, serif;" ></textarea>
    <br />
    You have <span id="charsLeft">160</span> chars left.
</td>

both above controls are inside update panel. fist time I can see this limit function works fine. but when update panel updated span shows 160 characters and not updating when typing on text area. How to fix this issue?

score 2 · Accepted Answer · answered Jul 11 '12 at 10:43

The problem is the update panel, and document ready not playing nice. An update panel essentially replaces all content on the page, but as the document is already ready, the event is never re-triggered.

What you'll want to do is move your document ready events into a separate function, and then call it both during document ready, and when an update has occurred within an update panel, something like this:

function onDocumentReady()
{
    $('[id$=Textarea1]').limit('150', '#charsLeft');
}

// this will get called on the first load
$(function()
{
    onDocumentReady();
});

// this will get called when an update panel request finishes
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance(); 
pageRequestManager.add_endRequest(onDocumentReady);

Alternatively (Un-tested)

What you might be able to do is trigger the ready event on the document when an update panel reloaded, you could try this:

// this will get called on the first load
$(function()
{
    $('[id$=Textarea1]').limit('150', '#charsLeft');
});

// this will get called when an update panel request finishes, triggering the dom ready
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance(); 
pageRequestManager.add_endRequest(function()
{
    $(document).trigger('ready');
});

score 0 · Answer 2 · answered Jul 11 '12 at 10:27

0

I think you must leave the span empty. The jQuery plugin will fill it itself.

answered Jul 11 '12 at 10:27

Maresh

4,644
25
30

if I put empty span then, it shows empty when update panel refresh. – Damith Jul 11 '12 at 10:30

score 0 · Answer 3 · answered Jul 11 '12 at 10:34

Damith I tried your code and it is working completely fine for me. Are you getting any error?

Below is HTML code I am using and JavaScript is same as what you have.

<form id="form1" runat="server">
 <asp:ScriptManager runat="server" />
 <asp:UpdatePanel ID="upd1" runat="server">
   <ContentTemplate>    
     <textarea id="Textarea1" class ="limit" runat="server" rows="4" cols="30"      style="resize: none; background-color: #F9E8EC; font-family: 'Times New Roman', Times, serif;" ></textarea>
<br />
 You have <span id="charsLeft">160</span> chars left.
<asp:Button ID="btnTest" runat="server" Text="Test" />
</ContentTemplate>

I hope it helps!

@Nil , Thanks for the info, no errors but it is not working.. bdw my aspx is more complex and i'm using Chrome as browser. I'm able to fix it with the help of Richard's answer — Damith, Jul 11 '12 at 10:55

Character Limit not working inside update panel

3 Answers3

Alternatively (Un-tested)