cancel on onbeforeunload in IE 6 & 7 create JS unspecified error

4 posts, 0 answers
  1. Rizwan
    Rizwan avatar
    30 posts
    Member since:
    Mar 2009

    Posted 13 Apr 2009 Link to this post

    Hi
       I have created a form where if any thing changes then unbeforeunload event is called for confirmation to navigate away.
    if I add a tabstrip with two tabs and after changing I click on second tab then this message prompts and on cancel it generates javascript error with message "unspecified error", If I click on any other control to navigate away then it works fine. The version of Telerik is 2009.1.402.35
    Environment: IE 6 & IE 7

    Here is the code

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

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

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <script language="javascript" type="text/javascript">
        var canPost = true;
        function SomeThingChanged() {
            canPost = false;
        }

        function canSubmit() {
            if (!canPost)
                return "You have made changes to the data and will lose these if you continue.";
        }
        
        // Attach the event
        window.onbeforeunload = canSubmit;

    </script>
    <body>
        <form id="form1" runat="server">
                <asp:ScriptManager runat="server" ID="smTest"></asp:ScriptManager>        
     
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnTabClick="RadTabStrip1_Click">
                 <Tabs>
                    <telerik:RadTab runat="server" Selected="True"  PageViewID="mpvTest1" Text="View">
                    </telerik:RadTab>
                    
                    <telerik:RadTab runat="server"   PageViewID="mpvTest2" Text="New">
                    </telerik:RadTab>
                </Tabs>
           </telerik:RadTabStrip>

          <telerik:RadMultiPage ID="mpTest" runat="server" SelectedIndex="0" Width="100%">
                <telerik:RadPageView ID="mpvTest1" runat="server">
                For error : Change some thing in textbox and click other tab then click cancel on popup
                    <input type="text" onchange="SomeThingChanged();" id="test" />
                    <asp:Button ID="Button1" runat="server" Text="Cancel Post without issue"
                        onclick="Button1_Click" />
                </telerik:RadPageView>
                
                <telerik:RadPageView ID="mpvTest2" runat="server">
                    test page 2
                </telerik:RadPageView>
            </telerik:RadMultiPage>
       
        </form>
    </body>
    </html>

    ON SERVER SIDE PASTE THIS

    protected void RadTabStrip1_Click(object sender, RadTabStripEventArgs e)
        {
            
        }
        protected void Button1_Click(object sender, EventArgs e)
        {

        }


    Looking forward for solution

    Best Regards
    Rizwan Bashir




  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 15 Apr 2009 Link to this post

    Hello Rizwan,

    This is a known issue with Internet Explorer. You can use the workaround from this blog post. To do so paste the following script block at the end of your page (just before closing the form tag):

            <script type="text/javascript">
            var __oldDoPostBack = __doPostBack;
            __doPostBack = CatchExplorerError;

            function CatchExplorerError (eventTarget, eventArgument)
            {
                try
                {
                    return __oldDoPostBack (eventTarget, eventArgument);
                }
                catch (ex)
                {
                    // don't want to mask a genuine error
                    // lets just restrict this to our 'Unspecified' one
                    if (ex.message.indexOf('Unspecified') == -1)
                    {
                        throw ex;
                    }
                }
            }

            </script>
    Best wishes,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Rizwan
    Rizwan avatar
    30 posts
    Member since:
    Mar 2009

    Posted 15 Apr 2009 Link to this post

    Hi Albert
                  This solution does not work well, Now please paste this Javascript on the page and after changing click on second tab. it will prompt to navigate away, click Cancel, now again click on same tab and it will do nothing and if you will click on selected tab now then it will prompt you back with same unbeforeunload message which is wrong.

     I think internally on first click Telerik tab sets the selected index in JS variables but it never notice that postback is cancelled, so if I click on second tab then telerik do nothing , considering the tab is already selected so at this stage if you click on visually selected tab then it will display the prompt
    Can you please let me know how can I tell telerik grid JS Variables that tab is not selected so stay tuned with initial tab as selected.

    Best Regards
    Rizwan Bashir

  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 15 Apr 2009 Link to this post

    Hello Rizwan,

    Unfortunately we cannot determine if the user has chosen to stay on the current page or postback. That's why RadTabStrip internally selects the clicked tab without visually showing it. As a result clicking the same tab does not trigger a postback. You can set the ClickSelectedTab property to true to enable selecting the already selected tab.

    The other option is to suppress the onbeforeunload message when the user clicks the tab and use a custom one.
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title></title
    </head> 
    <script language="javascript" type="text/javascript"
        var canPost = true
        var tabClicked = true
         
        function SomeThingChanged() { 
            canPost = false
            tabClicked = false
        } 
     
        function canSubmit() { 
            if (!canPost && !tabClicked) 
                return "You have made changes to the data and will lose these if you continue."; 
        } 
         
        function tabSelecting(sender, args) 
        { 
            tabClicked = true
            if (!canPost && !confirm("You have made changes to the data and will lose these if you continue.")) 
            { 
                args.set_cancel(true); 
                tabClicked = false
            } 
        } 
         
       
        // Attach the event 
        window.onbeforeunload = canSubmit
     
    </script> 
    <body> 
        <form id="form1" runat="server"
                <asp:ScriptManager runat="server" ID="smTest"></asp:ScriptManager>         
      
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnTabClick="RadTabStrip1_Click" 
            OnClientTabSelecting="tabSelecting"  
            > 
                 <Tabs> 
                    <telerik:RadTab runat="server" Selected="True"  PageViewID="mpvTest1" Text="View"
                    </telerik:RadTab> 
                     
                    <telerik:RadTab runat="server"   PageViewID="mpvTest2" Text="New"
                    </telerik:RadTab> 
                </Tabs> 
           </telerik:RadTabStrip> 
            <asp:CustomValidator runat="Server" /> 
          <telerik:RadMultiPage ID="mpTest" runat="server" SelectedIndex="0" Width="100%"
                <telerik:RadPageView ID="mpvTest1" runat="server"
                For error : Change some thing in textbox and click other tab then click cancel on popup 
                    <input type="text" onchange="SomeThingChanged();" id="test" /> 
                    <asp:Button ID="Button1" runat="server" Text="Cancel Post without issue" 
                        onclick="Button1_Click" /> 
                </telerik:RadPageView> 
                 
                <telerik:RadPageView ID="mpvTest2" runat="server"
                    test page 2 
                </telerik:RadPageView> 
            </telerik:RadMultiPage> 
        </form> 
    </body> 
    </html> 

    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top