Asp.NET: How to keep focus on textbox in a nested Update Panel

Question

I am working on making a semi simple post and reply/forum pages in asp.net(with C#). Everything works however when I went to add update panels it makes me want to throw my head into a wall.

I use a DataList to display the posts. I use a form consisting of two textboxes and a button to insert a new post. One textbox if for the name, and the other for the message.

First update panel I added (nested) is to provide a character count for the post. I have a label in the Content and it is triggered by the textboxes textchanged event. The textbox 'txtMessage' also has a java-script function run 'onkeyup' to keep the focus on the textbox when typing. I limit the characters at 1000.

The next update is to surround the DataList so that it does not post back everytime (if not used and the back button is hit it will go back and visually remove each post which is not a good design practice). However when I just put the panel around the DataList it did not postback the insert form so the boxes were not cleared. Which I would like to be done, so I wrapped everything then by this updatepanel, which then made the character count update panel nested by this one. This now works, but the focus is taken off of the txtMessage box each time the textchanged event fires. So the JavaScript is not firing now?

I have moved the opening and closing of the update panel countless times and have tried different fixes, so any further suggestions would help. The code is below.

ForumT.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ForumT.aspx.cs" Inherits="UPE_Site_v1.ForumT" %>

<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headPlaceHolder" runat="server">
<script type="text/javascript">
    function reFocus(id) {
        __doPostBack(id, '');
        document.getElementById(id).blur();
        document.getElementById(id).focus();
    }
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="server">

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetPosts" TypeName="TimeTrackerRepository" DataObjectTypeName="System.Guid" DeleteMethod="DeletePost">    </asp:ObjectDataSource>




<asp:UpdatePanel ID="upDataList" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

        <div>
            <asp:DataList ID="DataList2" runat="server" CellPadding="4" DataSourceID="ObjectDataSource1"
                ForeColor="#333333" OnItemCommand="DataList2_ItemCommand" OnItemDataBound="DataList2_ItemDataBound"
                DataKeyField="PostID" OnItemCreated="DataList2_ItemCreated">
                <AlternatingItemStyle BackColor="White" />
                <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                <ItemStyle BackColor="#D4EBD4" />
                <ItemTemplate>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            Name: <strong><%# Eval("Name") %></strong>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <%# Eval("TimePosted") %>
                        </div>
                        <div class="col-xs-12" style="word-break: break-all">
                            <%# Eval("Message") %>
                        </div>
                    </div>

                    <br />
                    <asp:Button ID="btnDelete" CssClass="btn btn-warning" runat="server" Text="Delete" CommandArgument='<%# Eval("PostID") %>' CommandName="DeleteItem" />
                    <asp:LinkButton CssClass="btn btn-primary" ID="lkbtnFullPost" runat="server" Text="See Full Post" CommandArgument='<%# Eval("PostID") %>' CommandName="FullPost"></asp:LinkButton>
                </ItemTemplate>
                <SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
            </asp:DataList>

        </div>

        <%--</ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnPost" EventName="Click" />
                </Triggers>
    </asp:UpdatePanel>--%>

        <br />
        <br />

        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">
                <p>Add a post to this forum:</p>
                <div class="form-group">
                    <asp:Label ID="Label1" runat="server" Text="Name: "></asp:Label>
                    <asp:TextBox CssClass="form-control" ID="txtName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="txtName"
                        ErrorMessage="This is a required field." ValidationGroup="Application"
                        Display="Dynamic" ForeColor="Red">
                    </asp:RequiredFieldValidator>
                </div>

                <%--<asp:UpdatePanel ID="upMessage" runat="server" UpdateMode="Conditional">
                <ContentTemplate>--%>

                <div class="form-group">
                    <asp:Label ID="Label2" runat="server" Text="Message: ">    </asp:Label>
                    <asp:TextBox onkeyup="reFocus(this.id);" CssClass="form-control" ID="txtMessage" runat="server" TextMode="MultiLine" Rows="4" OnTextChanged="txtMessage_TextChanged"></asp:TextBox>

                    <asp:RequiredFieldValidator runat="server" ControlToValidate="txtMessage"
                        ErrorMessage="This is a required field." ValidationGroup="Application"
                        Display="Dynamic" ForeColor="Red">
                    </asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator runat="server" ControlToValidate="txtMessage"
                        ErrorMessage="Character limit is 1000 characters."
                        ValidationGroup="Application" Display="Dynamic" ForeColor="Red"
                        ValidationExpression=".{0,1000}">
                    </asp:RegularExpressionValidator>
                </div>

                <br />
                <%--</div>
    </div>--%>
                <%--</ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnPost" EventName="Click" />
                </Triggers>
    </asp:UpdatePanel>--%>
                <%--<div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">--%>
                <asp:UpdatePanel ID="upMessage" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Label ID="lblCharacterCount" runat="server">0/1000</asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="txtMessage" EventName="TextChanged" />
                    </Triggers>
                </asp:UpdatePanel>
                <asp:Button ValidationGroup="Application" CssClass="btn btn-default" ID="btnPost" runat="server" Text="POST IT" OnClick="btnPost_Click" />
                <asp:Label ID="lblError" runat="server" Text="" CssClas="Error" ForeColor="Red"></asp:Label>

            </div>
        </div>

        <br />
        <br />
        <br />
    </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

ForumT.aspx.cs

only including the textchanged event

protected void txtMessage_TextChanged(object sender, EventArgs e)
    {

        lblCharacterCount.Text = txtMessage.Text.Count().ToString() + "/1000";
        if (txtMessage.Text.Count() >= 1000)
        {
            lblCharacterCount.ForeColor = System.Drawing.Color.Red;
        }
        else
        {
            lblCharacterCount.ForeColor = System.Drawing.Color.Black;
        }
    }

Sorry for the code being a little sloppy. Also side not, I am using bootstrap so that is what all of the div's are for

Answer 1

You say your javascript is not working. When using update panels and js you will need to rebind your js subscribed events.

Reference: jQuery $(document).ready and UpdatePanels?

Answer 2

I was facing the same issue as I needed to set focus on the textbox after postbacks in update panel. So I researched over internet & found this Javascript code. I tried it & it is working perfectly. It adds event listener for update panel for before & after postback. Gets textbox id before postback & set it after completion of postback.

    var lastFocusedControlId = "";

    function focusHandler(e) {
        document.activeElement = e.originalTarget;
    }

    function appInit() {
        if (typeof (window.addEventListener) !== "undefined") {
            window.addEventListener("focus", focusHandler, true);
        }
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
    }

    function pageLoadingHandler(sender, args) {
        lastFocusedControlId = typeof (document.activeElement) === "undefined"
            ? "" : document.activeElement.id;
    }

    function focusControl(targetControl) {
        if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
            var focusTarget = targetControl;
            if (focusTarget && (typeof (focusTarget.contentEditable) !== "undefined")) {
                oldContentEditableSetting = focusTarget.contentEditable;
                focusTarget.contentEditable = false;
            }
            else {
                focusTarget = null;
            }
            targetControl.focus();
            if (focusTarget) {
                focusTarget.contentEditable = oldContentEditableSetting;
            }
        }
        else {
            targetControl.focus();
        }
    }

    function pageLoadedHandler(sender, args) {
        if (typeof (lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
            var newFocused = $get(lastFocusedControlId);
            if (newFocused) {
                focusControl(newFocused);
            }
        }
    }

    Sys.Application.add_init(appInit);

Just use this code in your script on aspx page.