Кнопка внутри таблицы для удаления элемента строки

Question

Я должен удалить и элемент базы данных с помощью кнопки удаления таблицы. В таблице я показываю эти элементы, и когда пользователь нажимает кнопку «Удалить», я хотел бы показать подтверждающий модальный код, а затем вызвать веб-службу для удаления элемента. Я использую HTML, Thymeleaf, Bootstrap и JQuery Теперь в моей таблице у меня есть:

<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> 

Каждый элемент таблицы имеет version.idClientVersion, это ключ в базе данных, так что я должен использовать этот значение в моем веб-сервисе, но как передать его моему модальному, а затем моему аякс-вызову в 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> 

это мой вызов Ajax

$("#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

Это очень просто на самом деле.

Первый шаг

Это ваше удаление кнопки в каждой строке

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

Присвоить ROWID из БД с данными-HREF = "{ID}" ид здесь и называют deleteversionmodal

Тогда имеют эту функцию, которая будет работать при отображении модальности

$('#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')); 
}); 

в deleteVersionModal

эти это скрытое поле и кнопка удаления

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

Тогда на deleteVersionHiddenbtn нажмите это сделать

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

В основном то, что происходит в строке удалить кнопка вызова модального и иметь идентификатор в data-href идентификатора элемента db для удаления, затем присваивания этого идентификатора скрытому id в модальном режиме, а кнопка в модели использует этот скрытый идентификатор для удаления фактической записи в db.

Надеется, что это помогает;)