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?

Answer 1

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');
});