Cancel javascript event not working for Firefox

4 posts, 1 answers
  1. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 31 Jan 2014 Link to this post

    Hello. I have just written a lovey new web client using Telerik and was moments away for releasing it, when during browser testing I found that Firefox was not working as expected. As a result, all my many hours of hard work are going to waste.

    When using the RadButton, I sometimes call a javascript method to do some client side validation before allowing the postback. I can not stop Firefox from posting back ;-( I've made an example:

    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(this.IsPostBack)
            {
                radWindowManger.RadAlert("I dont want to see this Post Back", null, null, "Firefox HATES You", null);
            }
        }
     
        protected void btnGo_Click(object sender, EventArgs e)
        {
            bool stopHere = true;
     
            radWindowManger.RadAlert("I don't want to see this server message", null, null, "Firefox Hates YOU!", null);
        }
    }

    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
         
        <script type="text/javascript">
            //Put your JavaScript code here.
     
            function displayRadAlert(sender, eventArgs)
            {
                radalert("Hello World");
     
                event.returnValue = false;
                event.cancel = true;
     
                if(event.stopPropagation)
                {
                    event.stopPropagation();
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadWindowManager ID="radWindowManger" runat="server"  EnableShadow="true"/>
         
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadButton ID="btnGo" runat="server" Text="Go"
                OnClientClicked="displayRadAlert" OnClick="btnGo_Click" />
        </div>
        </form>
    </body>
    </html>

    Please help!

    Thanks in advance,
    Matt
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 04 Feb 2014 Link to this post

    Hi Matt,

    RadButton exposes two types of client-side event:

    • OnClientClicking event, which is cancelable (i.e., the postback can be avoided)
    • OnClientClicked event, which is not cancelable (i.e., the postback cannot be avoided only if AutoPostBack property is not set to true).

    Therefore in order to cancel the client-side click event of the button you can handle the OnClientClicking event and use inside of it set_cancel(true) method of the arguments.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 04 Feb 2014 Link to this post

    Hi Danail,

    Thanks for you reply. 
    I have found my own solution. 
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
         
        <script type="text/javascript">
            //Put your JavaScript code here.
     
            function displayRadAlert(event)
            {
                radalert("Hello World");
     
                var thereturn = false;
     
                if (event)
                {
                    // mozilla
                    if (!thereturn)
                    {
                        event.preventDefault();
                    }
                }
                else
                {
                    return thereturn;
                }
            }
     
            window.onload = function()
            {
                document.getElementById("btnGo").onclick = displayRadAlert;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadWindowManager ID="radWindowManger" runat="server"  EnableShadow="true"/>
         
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadButton ID="btnGo" runat="server" Text="Go"
                 OnClick="btnGo_Click" />
        </div>
        </form>
    </body>
    </html>
  5. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 04 Feb 2014 Link to this post

    But I like your solution better
Back to Top