CODEWITHSUNDEEP
javascriptspring-bootspring-data-jpathymeleaf
mimo2000
mimo2000

Reputation: 35

Spring Boot delete action using a modal

I tried to delete some rows in my table by the help of a delete button in each row . When i click in the button a confirmation modal appears to notify the user about the result of his action .When he confirms ,the row will be deleted from the table.In my Code just in the first row when i click on the delete button the modal appers to confirm the act else does not appear it delete automatically without any confirmation modal.

Can you help to determine where the problem located and thanks .

Javascript Code :


$('#btn-delete').on('click', function (e) {
e.preventDefault();
var href =$(this).attr('href');
$('#myModal #btnDelteYes').attr('href',href);
$('#myModal').modal();});

Html Code :

<table class="table table-striped">
                    <tr>
                    <th>  </th>
                        <th> xxxx </th>
                        <th>xxx</th>

                        <th>xxx</th>
                        <th>xxx</th>
                        <th>xxx</th>
                        <th>xxx</th>
                    </tr>

                    <tr th:each="o:${listOrdres}">
                    <td style=" padding-top: 0px;"><a id="btn-delete" th:href="@{delete(id=${o.num_ord})}"  class="btn btn-danger">xxx</a></td>




                    <td style=" padding-top: 0px;"><a  th:href="@{edit(id=${o.num_ord})}" class="btn btn-info">xxx</a></td>
                    <td th:text="${o.suj_ord}"></td>

                    <td th:text="${o.dir_ord}"></td>
                    <td th:text="${o.class.simpleName}"></td>
                    <td th:text="${#dates.format(o.dte_ord, 'yyyy-MM-dd')}"></td>
                    <td th:text="${o.num_ord}"></td>


                    </tr>

                    </table>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h3 class="modal-title pull-right" id="myModalLabel">!!!!!!xx</h3>

        </div>
        <div class="modal-body">
             <p class="alert alert-danger pull-right">!!!!!!!! xxx </p>

        </div>

        <div class="modal-footer">
            <a href="" type="button" class="btn btn-danger" id="btnDelteYes">xx</a>
            <button type="button" class="btn btn-default" data-dismiss="modal">xx</button>
        </div>

    </div>

</div>

Upvotes: 0

Views: 2126

Answers (1)

Alain Cruz
Alain Cruz

Reputation: 5097

The problem is that you are duplicating ids, which should be unique. So when you add a click event to it, it will only call the first one it's find, which is the first row. Please, change it for a class event like the following code.

JS

$('.btn-delete').on('click', function (e) {
    e.preventDefault();
    var href =$(this).attr('href');
    $('#myModal #btnDelteYes').attr('href',href);
    $('#myModal').modal();
});

HTML

<tr th:each="o:${listOrdres}">
    <td style=" padding-top: 0px;"><a th:href="@{delete(id=${o.num_ord})}"  class="btn btn-danger btn-delete">xxx</a></td>
    <td style=" padding-top: 0px;"><a  th:href="@{edit(id=${o.num_ord})}" class="btn btn-info">xxx</a></td>
    <td th:text="${o.suj_ord}"></td>
    <td th:text="${o.dir_ord}"></td>
    <td th:text="${o.class.simpleName}"></td>
    <td th:text="${#dates.format(o.dte_ord, 'yyyy-MM-dd')}"></td>
    <td th:text="${o.num_ord}"></td>
</tr>

Upvotes: 1

Related Questions