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

Answer 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 ;)