Button inside a table to delete a row element

Question

I have to delete and element of database through delete button of the table. In the table I show these elements and when the user click on delete button I would like to show a confirm modal and then call a web service to delete the element. I'm using HTML, Thymeleaf, Bootstrap and JQuery Now in my table I have:

<tr th:each="version : ${versions}">
    <td th:text="${version.name}"></td>
    <td th:text="${version.releaseDate}"></td>
    <td th:text="${version.Note}"></td>
    <!-- Give me the size of the list. Each version has a lot of users store in a list named users -->
    <td th:text="${#lists.size(version.users)}"></td>
    <td th:if="${#lists.size(version.users)}==0"><button
            type="button" class="btn btn-danger" id="deleteVersion"
            data-toggle="modal" data-target="#deleteVersionModal"
            data-toggle="tooltip">Delete</button></td>
    <td th:if="${#lists.size(version.users)}!=0"><button
            type="button" class="btn btn-danger" id="deleteVersion"
            disabled>Delete</button></td>
</tr>

Each element of table has a version.idClientVersion, this is the key in the database, so I have to use this value in my webservice, but how can pass it to my modal and then to my ajax call in javascript.

<div class="modal" id="deleteVersionModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">New version</h4>
            </div>
            <div class="modal-body">
                <!-- form start -->
                    <div class="box-body">
                        Are you sure? The release version wiil be deleted permanently, you can't recover it.
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left"
                    data-dismiss="modal">Close</button>
                <button id="cancelVersionButton" type="button" class="btn btn-primary">Upload
                    version</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

this is my ajax call

$("#cancelVersionButton").click(
    function() {
        //CSRF attribute for spring security
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $('#deleteVersionModal').modal("hide");     
        jQuery.ajax({
            type : "DELETE",
            url : "/"+,
            beforeSend:function(xhr) {
                xhr.setRequestHeader(header, token);
                waitingModal.showPleaseWait();
            },  
            success: function(data,status,xhr){
                //No exception occurred
                if (data.status){   
                    //Also the field are right(for e.g. form value)
                    if(data.success){
                        $('#versionsTable').load(document.URL +  ' #versionsTable');                        
                        notifyMessage(data.result + " was deleted!", 'success');
                    }
                    else{
                        //code if there are some error into form for example
                    }
                } else {
                    notifyMessage(data.result, 'error');
                }
            },
            error: function(xhr,status,e){
                window.location.href = "/ATS/500";
            }
        }).complete(function() {
            //add timeout because otherwise user could see a too fast waiting modal
            setTimeout(function(){
                waitingModal.hidePleaseWait();
            }, 1000);
        });             
    });

To answer your questions, you should show us the how Thymeleaf actually renders your table in HTML. — Alessio Cantarella
– Alessio Cantarella, Commented Jan 28, 2016 at 14:09
th:each and th:text is used to render the table. I don't understand, what do you need? — luca
– luca, Commented Jan 28, 2016 at 14:14

Pardeep Dhingra · Accepted Answer · 2016-01-28 14:25:52Z

1

This is quite easy actually.

First step

This is your delete button in each row

<a href="#" data-href="{id}" data-toggle="modal" data-target="#deleteVersionModal">Delete Record</a>

Assign rowid of the db to data-href="{id}" id here and call deleteversionmodal

Then have this function which will run when the modal is shown

$('#deleteVersionModal').on('show.bs.modal', function (e) {
  $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
  $('#deleteVersionHiddenId').val($(this).find('.btn-ok').attr('href'));
});

Then in deleteVersionModal

Have these this hidden field and a delete button

<input type="hidden" id="deleteVersionHiddenId" name="deleteVersionHiddenId" value="0" />
<a class="btn btn-danger btn-ok" id="deleteVersionHiddenbtn">Delete</a>

Then on deleteVersionHiddenbtn click do this

$('#deleteVersionHiddenbtn').click(function (e){
  e.preventDefault();
  var Id = $('#deleteVersionHiddenId').val();
  //delete here
});

Basically what is happening is row delete button is calling the modal and have id in data-href of the db item id to delete, then assigning that id to hidden id in modal, and the button in model is using that hidden id to delete the actual record in db.

Hope this helps ;)

edited Jan 28, 2016 at 14:25

Pardeep Dhingra

3,9467 gold badges35 silver badges57 bronze badges

answered Jan 28, 2016 at 14:17

atiqi36

364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

luca Over a year ago

it works, I only changer the thymeleaf function to retrieve Id. Many thanks

Collectives™ on Stack Overflow

Button inside a table to delete a row element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related