nPath Ltd. » Ajax http://www.npathweb.com Web Development Blog Mon, 22 Feb 2010 15:16:30 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Ajax update panels and the errors that love them. http://www.npathweb.com/2009/02/05/ajax-update-panels-and-the-errors-that-love-them/ http://www.npathweb.com/2009/02/05/ajax-update-panels-and-the-errors-that-love-them/#comments Thu, 05 Feb 2009 17:02:31 +0000 B.Harding http://www.npathweb.com/blog/?p=20 I have been using ajax a lot lately in my current project. I have noticed an annoying quirk. When a runtime error happens the page appears to hang. temprarily dissabling the update panel quickly reveals that the page isn’t really stuck, but there is an error that ajax is ignoring.

I did some research and found a few good examples of how to handle the errors but most were in C# and some didn’t work in Firefox. Imagine that!

Being a VB guy I decided to post a very stipped down sample of how it works.

The lowdown: The script manager is wired to an event handler that passes the exeption info to the client side java script.  Then we put some client side java script in to display the message.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub SuccessProcessClick_Handler(ByVal sender As Object, ByVal e As System.EventArgs)
        'a successful click
        UpdatePanelMessage.Text = "The asynchronous postback completed successfully."

    End Sub

    Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs)

        'this creates an exception in the client side Javascript. the exeption will be handled on the client side.
        ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message

    End Sub

    Protected Sub ErrorProcessClick_Handler(ByVal sender As Object, ByVal e As System.EventArgs)

        'cause an error on this click
        Dim x As Integer = 0
        Dim y As Integer = 10 / x

    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
      <style type="text/css">
   #AlertDiv{
     position:relative;
     visibility: hidden;
     background-color:maroon;
     color:White;
     width:500px;

    }

    </style>
</head>
<body >
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"
                onasyncpostbackerror="ScriptManager1_AsyncPostBackError" />

            <script type="text/javascript" language="javascript">
               // this is the client side script that will handle the error passed from the server.
                var divElem = 'AlertDiv';
                var messageElem = 'AlertMessage';
                var bodyTag = 'bodytag';
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

               //hide or show the error div
                function ToggleAlertDiv(visString)
                {

                     var adiv = $get(divElem);
                     adiv.style.visibility = visString;

                }

                //reset the error div
                function ClearErrorState() {
                     $get(messageElem).innerHTML = '';
                     ToggleAlertDiv('hidden');                     
                }
                //put the error text into the div
                function EndRequestHandler(sender, args)
                {
                   if (args.get_error() != undefined)
                   {
                       var errorMessage = args.get_error().message;
                       args.set_errorHandled(true);
                      ToggleAlertDiv('visible');
                      //errorMessage.split(":",2)[1] = get just the message and chop off the identifier before the :
                      //The message iteself is the only usefull part to the end user.
                      $get(messageElem).innerHTML ='Error:' + errorMessage.split(":",2)[1];

                   }
                }
            </script>
            <asp:UpdatePanel runat="Server" ID="UpdatePanel1">
                <ContentTemplate>

                  <div id="AlertDiv">

                      <div id="AlertMessage"></div>

                         <input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />

                  </div>

                        <asp:Label ID="UpdatePanelMessage" runat="server" /><br />

                        <asp:Button runat="server" ID="Button1" Text="Submit Successful Async Postback"
                            OnClick="SuccessProcessClick_Handler" OnClientClick="ClearErrorState()" />
                        <asp:Button runat="server" ID="Button2" Text="Submit Async Postback With Error"
                            OnClick="ErrorProcessClick_Handler" OnClientClick="ClearErrorState()" />

                </ContentTemplate>
            </asp:UpdatePanel>

     </div>
    </form>
</body>
</html>
]]> http://www.npathweb.com/2009/02/05/ajax-update-panels-and-the-errors-that-love-them/feed/ 0