Howto: Set page focus to message after Ajax update

There are so many good things about AJAX but we need to tweak it some times to make it even user experience.

Let me explain my situation first.  I have a datagrid that has a edit button tied to each row to edit that particular record.  Clicking on edit button, it opens up ajax modal popup where you can update the record.  Once you update the record, it closes down the modal popup and displays the message on top of the page saying “Record has been updated successfully”.  Same senario with insert new record but additionally it rebind the datagrid.   And yes I do have a updatepanel around the page to get async post back.

Everything works fine but after updating the record, focus stays at row where I clicked edit button and it’s general behavior of the ajax update panel.  But from end user point of view, they don’t know whether the record is updated successfully or not because they are seeing any confirmation message up front there.  The message is there if you scroll page all the way up but this is not good we should do something so that user see confirmation message right there.

I found a way to set page focus to confirmation message after ajax update.  There is a “endRequestHandler” event that raises after an asynchronous postback is finished and control is retured to browser.  You can add logic in this event to set page focus but what logic?? (that’s tricky part here).  You can have anchor tag in page next to confirmation message(label) and set window.location to #achorname in “endRequestHandler” event.

Here is the code.

function EndRequestHandler(sender, args) {
    // 'SetConfirmationMessageFocus' it's name of anchor tag we created in .aspx page.
    window.location = "#SetConfirmationMessageFocus";
}

Since we put this logic in “endRequestHandler” event, it will call this method after every async postback is finished.  So you can call this javascript method from code behind  after your data has been updated.

Here is the complete code.

function EndRequestHandler(sender, args) {
    window.location = "#SetConfirmationMessageFocus";
}

ASP.NET Page (aspx)

<!--Create a dummy anchor tag that will be used to set page focus using window.location.-->
<a name="SetConfirmationMessageFocus"/>

<!--Actual confirmation message display here in lblMessage label  -->
<asp:Label runat="server" ID="lblMessage"></asp:Label>

ASP.NET Code Behind

Protected Sub btnUpdateData_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSaveStyle.Click

  'your logic here to update/insert data

  'register javascript that will be executed
  'upStyleTab is the updatepanel id
  ScriptManager.RegisterStartupScript(upStyleTab, upStyleTab.GetType(), "key", "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);", True)

End Sub

Javascript Code

function EndRequestHandler(sender, args) {
    // 'SetConfirmationMessageFocus' it's name of anchor tag we created in .aspx page.
    window.location = "#SetConfirmationMessageFocus";
}

Leave a comment here if you have any question.

Hope this helps.

Posted in Microsoft Technology Tagged with: ,
2 comments on “Howto: Set page focus to message after Ajax update
  1. Anonymous says:

    just what was looking for

1 Pings/Trackbacks for "Howto: Set page focus to message after Ajax update"
  1. Howto: Set page focus to message after Ajax update | Broken Code…

    […]ASP.NET Code Behind Protected Sub btnUpdateData_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSaveStyle.Click ‘your logic here to update/insert data ‘register javascript that will be executed ‘upStyleTab is the …[…]…

Ads