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

Cancel javascript event not working for Firefox

3 Answers 247 Views
Button
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 31 Jan 2014, 03:57 PM
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

3 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 04 Feb 2014, 11:20 AM
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.
0
Matt
Top achievements
Rank 1
answered on 04 Feb 2014, 11:27 AM
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>
0
Matt
Top achievements
Rank 1
answered on 04 Feb 2014, 01:30 PM
But I like your solution better
Tags
Button
Asked by
Matt
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Matt
Top achievements
Rank 1
Share this question
or