jquery blur event not firing for asp:ListBox

Question

I need to trigger the 'blur()' event for an asp:ListBox. I am using the jquery plugin chosen for this control. Once the blur event is triggered I am using ajax to call a server side method. This is my markup for the ListBox:

<asp:Panel ID="pnlTo" runat="server" CssClass="basicRow" ClientIDMode="Static">
        <asp:Label ID="lblTo" runat="server"  CssClass="labelText" Text="To: " 
            ClientIDMode="Static"></asp:Label>        
        <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple" 
                    data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
        </asp:ListBox>
        <asp:HiddenField ID="hdnRecipientAttr" runat="server" ClientIDMode="Static" />
    </asp:Panel>

This is the javascript: All of the javascript works except for triggering the blur event.

 $(document).ready(function () {

        //Create groups for recipient dropdown list
        $(".chosen-select option[grouping='GlobalGroups']").wrapAll("<optgroup label='Global Groups'>");
        $(".chosen-select option[grouping='PersonalGroups']").wrapAll("<optgroup label='Personal Groups'>");
        $(".chosen-select option[grouping='Individuals']").wrapAll("<optgroup label='Individuals'>");

        //Configure the ListBox using the 'chosen' jquery plugin
        $(".chosen-select").chosen({
            search_contains: true,
            no_results_text: "Sorry, no match!",
            allow_single_deselect: true
        });
        $('.chosen-container').css('width', '600px');

        $(".chosen-single").chosen({
            search_contains: true,
            no_results_text: "Sorry, no match!"
        });

        //set hidden field with selected list
        $(".chosen-select").chosen().change(function (evt) {
            $("#hdnRecipientAttr").val("");
            $(".chosen-select").find("option:selected").each(function () {
                var label = $(this).closest('optgroup').prop('label');
                var currentHdnValue = $("#hdnRecipientAttr").val();

                if (label == "Individuals") {
                    var attrText = "Individuals-" + $(this).prop('value') + ";";
                    $("#hdnRecipientAttr").val(currentHdnValue + attrText);
                }
                else {
                    var attrText = "Group-" + $(this).prop('value') + ";";
                    $("#hdnRecipientAttr").val(currentHdnValue + attrText);
                }
            });
            //remove ending semicolon
            var hdnValue = $("#hdnRecipientAttr").val();
            $("#hdnRecipientAttr").val(hdnValue.slice(0, -1));
        });

        $("#lstBoxTo").blur(function () {
            alert("in onblur function");
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetMaxMsgLength",
                data: '{selectedRecipients: "#hdnRecipientAttr"}',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: OnSuccess,
                failure: OnFailure
            });
        });
    });

The OnSuccess and OnFailure functions are defined later. For now, I just want to see the alert that shows I am in the blur function.

This is the code-behind that is called from AJAX:

public static string GetMaxMsgLength(string strRecipientList)
    {
        string tstrMaxMsgLength = string.Empty;
        PagingService.EmailInfo EmailInfo = new PagingService.EmailInfo();
        List<int> tlstIndividualIDs = new List<int>();
        List<int> tlstGroupIDs = new List<int>();
        string[] tstrSelectedList = strRecipientList.Split(';');
        foreach (string recipientID in tstrSelectedList)
        {
            if (recipientID.Contains(INDIVIDUAL_GROUP))
            {
                tlstIndividualIDs.Add(Convert.ToInt32(recipientID.Substring(recipientID.IndexOf('-') + 1)));
            }
            else //it's a groupID
            {
                tlstGroupIDs.Add(Convert.ToInt32(recipientID.Substring(recipientID.IndexOf('-') + 1)));
            }
        }
        EmailInfo.IndividualIDs = tlstIndividualIDs.ToArray();
        EmailInfo.GroupIDs = tlstGroupIDs.ToArray();

        return tstrMaxMsgLength = "32";
    }

Can anybody give me some idea why the blur function is not firing? Thanks.

UPDATE

I tried using the class to ID the function but it does not work either: This is my change:

 $(".chosen-select").chosen().blur(function () {
            alert("in onblur function");
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetMaxMsgLength",
                data: '{selectedRecipients: "#hdnRecipientAttr"}',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: OnSuccess,
                failure: OnFailure
            });
        });

I tried it without 'chosen()' and still not success.

UPDATE

I tried defining the 'onblur' event in the markup and bound it in Page_Load but still without luck. This is what I tried: Markup:

 <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple" ClientIDMode="Static" onblur="ShowMaxMsgLength()"
                        data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
            </asp:ListBox>

Javascript (I commented out the blur function in the document ready function and added this function:

function ShowMaxMsgLength() {
                        alert("in onblur function");
                        $.ajax({
                            type: "POST",
                            url: "Default.aspx/GetMaxMsgLength",
                            data: '{selectedRecipients: "#hdnRecipientAttr"}',
                            contentType: "application/json; charset=utf-8",
                            datatype: "json",
                            success: OnSuccess,
                            failure: OnFailure
                        });
    };

In the Code-behind in the Page_load method I added this:

lstBoxTo.Attributes.Add("onblur", "ShowMaxMsgLength()");

Still no luck....

UPDATE It is something about the ListBox that is does not like. I added the blur event to the Message TextBox it was triggered. Using this:

onblur="ShowMaxMsgLength()"

In the message box, the alert was shown when the text box lost focus.

UPDATE It is using the jquery-chosen plugin as the ListBox that is the problem. Taking the 'class-chosen-select' away and displaying the ListBox as a normal asp:ListBox control, the blur function is triggered.
Now, I just have to figure out how/why 'chosen' does not like the 'onblur' function...

Answer 1

I was able to do what I need to do using the '.change' event.

Answer 2

As Dave mentioned its the id that's the issue. However you could also choose to use a "class" as the selector.

Lastly you might also consider adding the event in code and binding it to the control on load.

ddl.Attributes.Add("onblur", "YOUR_EVENT();");

That said I would suggest using classes in most cases.

Answer 3

I've worked with the Chosen library on a previous project. Under the covers chosen will generate its own markup and effectively hide your original list box only using it to "hold" the selection. You might want to to try capturing an on blur event. If I recall correctly Chosen will copy the original classes from the original DOM element...

$('.chosen-select').on('blur', function() { ... });

Answer 4

You forgot to set ClientIDMode="Static" on lstBoxTo so it is not generating the HTML with the ID you expect. In your .aspx code, define the control like this:

<asp:ListBox ID="lstBoxTo" runat="server" ClientIDMode="Static" SelectionMode="Multiple" data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>