Windows confirm - default action not working

Question

I have an Razor view with an href anchor tag. I have an onclick event.

When I click on the link, the confirm prompt appears. However, if I choose "Cancel" it still executes the code - the MVC method.

Here is the Razor view:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title></title>

<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

@Scripts.Render("~/bundles/modernizr")

<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>

<body>
@Html.Partial("_NavBar")

<div id="wrapper">
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"><strong>Functions</strong></a>
        </div>

        @* Navigation left-handside (sidebar). *@
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                      <li>
                        <a href="/User/DeleteUser" onclick="ConfirmDelete()"><i class="fa fa-table fa-fw"></i> Delete Account</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
            <script src="~/Scripts/jquery.validate.min.js"></script>
            <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

            @RenderBody()
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)
</body>
</html>

<script type="text/javascript">
function ConfirmDelete(e) {
    if (confirm("Are you sure you want to delete your account?   Continue ?")) {
        window.location = $(this).attr('href');
    }

    // Stop the default action.
    e.preventDefault();
}
</script>

I tried using jQuery (adding a deleteaccount class to the link) and it does not prompt all. It just goes right to executing the code.

Here is the Razor view:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title></title>

<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

@Scripts.Render("~/bundles/modernizr")

<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>

<body>
@Html.Partial("_NavBar")

<div id="wrapper">
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#"><strong>Functions</strong></a>
        </div>

        @* Navigation left-handside (sidebar). *@
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                      <li>
                        <a href="/User/DeleteUser"><i class="fa fa-table fa-fw deleteaccount"></i> Delete Account</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
            <script src="~/Scripts/jquery.validate.min.js"></script>
            <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

            @RenderBody()
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)
</body>
</html>


<script type="text/javascript">
    $('.deleteaccount').click(function (e) {
        if (confirm("Are you sure you want to delete your account?   Continue ?")) {
            // The button's href will be = to: ?????????????.
            window.location = $(this).attr('href');
        }

        e.preventDefault();
    });
</script>

Answer 1

I tried solving your issue, and below is one of the solution:

The default behavior of the a tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false or the event hasn't been prevented. In your case event is not prevented a you have not passed the event as parameter to your ConfirmDelete() method. Hence both onClick and Href is executed.

So try this Out:

 function ConfirmDelete(e) { if (confirm("Are you sure you want to delete your account? Continue?")) { return true; } else { return false; } // Stop the default action. // e.preventDefault(); }

 <a href="/controller/action" onclick="return ConfirmDelete()"><i class="fa fa-table fa-fw"></i> Delete Account</a>

Windows confirm - default action not working

Question

1 answers

solution1
0 ACCPTED 2020-04-16 10:48:29

Windows confirm - default action not working

Question

1 answers

solution1 0 ACCPTED 2020-04-16 10:48:29

solution1
0 ACCPTED 2020-04-16 10:48:29