title: Button inside a table to delete a row element
body: <p>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:</p>
  
  <pre><code>&lt;tr th:each="version : ${versions}"&gt;
      &lt;td th:text="${version.name}"&gt;&lt;/td&gt;
      &lt;td th:text="${version.releaseDate}"&gt;&lt;/td&gt;
      &lt;td th:text="${version.Note}"&gt;&lt;/td&gt;
      &lt;!-- Give me the size of the list. Each version has a lot of users store in a list named users --&gt;
      &lt;td th:text="${#lists.size(version.users)}"&gt;&lt;/td&gt;
      &lt;td th:if="${#lists.size(version.users)}==0"&gt;&lt;button
              type="button" class="btn btn-danger" id="deleteVersion"
              data-toggle="modal" data-target="#deleteVersionModal"
              data-toggle="tooltip"&gt;Delete&lt;/button&gt;&lt;/td&gt;
      &lt;td th:if="${#lists.size(version.users)}!=0"&gt;&lt;button
              type="button" class="btn btn-danger" id="deleteVersion"
              disabled&gt;Delete&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;div class="modal" id="deleteVersionModal"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"
                      aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;New version&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;!-- form start --&gt;
                      &lt;div class="box-body"&gt;
                          Are you sure? The release version wiil be deleted permanently, you can't recover it.
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default pull-left"
                      data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button id="cancelVersionButton" type="button" class="btn btn-primary"&gt;Upload
                      version&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.modal-content --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is my ajax call</p>
  
  <pre><code>$("#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);
          });             
      });
  </code></pre>