Question

I’m using jQuery to display a counter above a textbox of how many characters the user has entered and how many they have left. It does this by updating the .text() of a span above the textbox.

So in $(document).ready I initially set the span to the maxlength of the textbox and then onkeyup it is updated.

It’s working very well, however when the textbox is inside a ASP.NET ModalPopup from the ajax control library, I have observed that if the ModalPopup closes and then is reopened, the $(document).ready doesn’t appear to re-fire so the initial number of characters remaining isn’t updated (although when you start typing again, it works as expected)

(In my example there is a DropDownList inside the ModalPopup with AutoPostBack=”true”, and after postback the .Show() method is called on the popup extender to make it remain visible)

When I’ve come across similar things I’ve been directed to use the .live event in jQuery which I have done for the keyup handler. Is there some similar way to solve the problem for the initial setting of the span?

ASP.NET markup:

<asp:Content ID="Content2" ContentPlaceHolderID="cMain" Runat="Server">
    <p> 
        Enter some text (<span id="countRemain"></span> characters remaining) <br />
        <asp:TextBox runat="server" id="txtCounterTest" MaxLength="100" CssClass="input mediumField CountMe" />
    </p>
</asp:Content>

and associated jQuery:

$(document).ready(function () {
    $(".CountMe").each(function () {
        var txtBoxContent = ($(this).val());
        var txtBoxMaxLength = ($(this).attr("maxlength"));

        var length = (txtBoxMaxLength - txtBoxContent.length) + '/' + txtBoxMaxLength;

        //alert(length);

        $(this).parent().find("#countRemain").text(length);
    });

    $(".CountMe").live("keyup", function (event) {
        var txtBoxContent = ($(this).val());
        var txtBoxMaxLength = ($(this).attr("maxlength"));

        var length = (txtBoxMaxLength - txtBoxContent.length) + '/' + txtBoxMaxLength;

        //alert(length);

        $(this).parent().find("#countRemain").text(length);
    });
});

Answer 1

I’m afraid the “ready” event won’t fire again after the ajax has executed.

Adding “shown”/”hiding” events to the ModalPopupExtender

I’ve never user the ajax control toolkit so i’m not very familiar with it. Although I have found this add_shown & add_hiding ModalPopupExtender Events article that explains how to attach an event handlers when the popup is shown or hidden.

This is I guess what you want to achieve: when the modal is shown, re-calculate “how many characters the user has entered and how many they have left”.

Sys.Application.add_load(pageInit);   

function pageInit()  
{  
    var modalPopup = $find('ModalPopupExtender1');   
    modalPopup.add_shown(onModalShown);  
}  

function onModalShown(sender, args)  
{  
    // this will be executed when the modal is shown.
    // re-calculate here the character thing
}   

I haven’t tested it to be honest but it should maybe give you a lead.

Further reading:

• ASP.net Ajax Client Life-Cycle Events
• PageRequestManager class

Event delegation

Concerning the delegation of the “keyup” event using jquery, you should use .delegate() (jQuery 1.4.3+) or .on() (jQuery 1.7+) instead of .live() as the latter is obsolete now and might be removed from the jquery library in any future version.

The delegation mechnism is completely different and more efficient and the syntax differs a little bit also:

$("#someParentContainer").delegate('.CountMe', 'keyup', function(e) {

});

$("#someParentContainer").on('keyup', '.CountMe', function(e) {

});

In words, you will delegate the event “keyup” triggered from an element with class “.CountMe” to a parent element (like you “#Content” panel for instance).