Di sistem Springboot saya, saya perlu memiliki pesan sembulan javascript untuk mengonfirmasi penghapusan ketika saya memilih tombol hapus. Namun saat ini menghapus catatan tanpa memunculkan pesan konfirmasi ketika saya mengklik tombol hapus. Dapatkah seseorang membantu saya untuk menyelesaikan ini? Terima kasih.

Tampilan subjek file 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>

Pengontrol Subjek

@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();
    });

});
0
Ayesh17 31 Oktober 2019, 12:04

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan peringatan untuk mengonfirmasi atau membatalkan saat Anda mengklik tombol hapus.

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);
}
2
Pramuditha 31 Oktober 2019, 09:44