This is a migrated thread and some comments may be shown as answers.

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

3 Answers 130 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Rizwan asked on 13 Apr 2009, 02:48 PM

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

3 Answers, 1 is accepted

answered on 15 Apr 2009, 11:26 AM

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.

answered on 15 Apr 2009, 01:51 PM

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

answered on 15 Apr 2009, 04:48 PM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

3 Answers, 1 is accepted