Spring-boot删除javascript确认消息

Posted

技术标签:

【中文标题】Spring-boot删除javascript确认消息【英文标题】:Spring-boot delete javascript confirmation message 【发布时间】:2020-02-26 14:35:09 【问题描述】:

在我的 Springboot 系统中,当我选择删除按钮时,我需要有一个 javascript 弹出消息来确认删除。但是,当我单击删除按钮时,当前它会删除记录而不会弹出确认消息。有人可以帮我解决这个问题吗?谢谢。

主题视图 html 文件

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>

    <!-- Nav Bar header code-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <script type="text/javascript" src="webjars/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script type="text/javascript" src="webjars/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@js/main.js" src="../static/js/main.js"></script>
    <link rel="icon" href="../../favicon.ico"/>
    <link rel="stylesheet"  href="webjars/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css "/>


    <!-- Bootstrap core CSS -->
    <link href="../static/css/bootstrap.css" rel="stylesheet" th:href="@/css/bootstrap.css"/>
    <!-- End of Nav Bar header code-->

    <link rel="stylesheet" type="text/css" href="static/css/view.css" th:href="@/css/view.css">
    <meta charset="UTF-8">
    <title>Subject Details</title>
</head>
<body>

<!-- Nav Bar body code-->
<div class="containerr">
    <!-- Static navbar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="../admin/">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>
</div>
<!-- End of Nav Bar body code-->

<h1>Subject Details</h1>
<a href="../subject/new"><h2>Add a new Subject</h2></a>
<a href="../subject/csv"><h2>Upload a CSV File</h2></a>
<div class="container" style="margin-top:30px">
    <br><br>
    <table border="1">
        <thead>
        <tr>
            <th>Subject Code</th>
            <th>Name</th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="subject : $subjectDetails">
            <td th:text="$subject.subjectCode">Code</td>
            <td th:text="$subject.name">Name</td>

            <td>
                <a th:href="@'/subject/edit/' + $subject.id">Edit</a>
            </td>
            <td>
                <a th:href="@subject/delete/(id=$subject.id)" class="btn btn-danger delBtn">Delete</a>
            </td>


        </tr>
        </tbody>
    </table>
</div>



<div class="myForm">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <P class ="alert alert-danger">
                        Are you sure you want to delete?
                    </P>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <a href=""  class="btn btn-danger" id="delRef">Delete</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../static/js/bootstrap.js" th:href="@/js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>

主题控制者

@RequestMapping("/subject/delete")
    public String deleteProduct(Long id)
        subjectDAO.delete(id);
        return  "redirect:/subject";
    

main.js

$(document).ready(function () 

    $('.table .delBtn').on('click',function (event) 
        event.preventDefault();
        var href=$(this).attr('href');
        $('#myModal #delRef').attr('href',href);
        $('#myModal').modal();
    );

);

【问题讨论】:

【参考方案1】:

您可以在单击删除按钮时使用警报来确认或取消。

function myFunction() 
  var txt;
  if (confirm("Want to delete!")) 
    txt = "Deleted!";
    // Do the delete when you click ok
   else 
    txt = "Cancel!";
    // If you click cancel, remove the alert box
  
  console.log(txt);

【讨论】:

以上是关于Spring-boot删除javascript确认消息的主要内容,如果未能解决你的问题,请参考以下文章

javaScript 删除事件 弹出确认 取消对话框

JavaScript 确认删除

删除记录前的JavaScript确认警报

js 确认删除

gridview 行删除确认框

JS - 删除确认