Bootstrap Модальное подтверждение

Question

У меня есть таблица, в которой отображаются данные пользователя за строку вместе с кнопкой «Удалить», которая запускает диалоговое окно подтверждения загрузки Bootstrap.

Моя цель состоит в том, чтобы кнопка подтверждения вызывала событие, которое удалит этого конкретного пользователя.

Как передать jsmith22 из строки таблицы в мою функцию Javascript?

HTML Таблица

<tr> 
    <td>jsmith22</td> 
    <td>John Smith</td> 
    <td>555-555-5555</td> 
    <td>test@gmail.com</td> 
    <td><button type="button" class="btn btn-default btn-lg btn-block roster-button active" data-toggle="modal" data-target="#removeUser">Remove</button></td> 
</tr> 

модальный диалог

<div aria-labelledby="myModalLabel" class="modal fade" id="removeUser" 
role="dialog" tabindex="-1"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Remove Employee</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Are you sure you wish to remove this user?</p> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button> 
       <button class="btn btn-danger" id="remove-button" type="submit">Remove</button> 
      </div> 
     </div><!-- end modal-content --> 
    </div><!-- end modal-dialog --> 
</div><!-- end modal --> 

Javascript

// Remove button event trigger 
$('#remove-button').click(function() { 
     $.post('/API/removeUser', {}); 
}); 

Answer 1

Может сделать это с Bootstrap Modal event listener

Добавить атрибутивные данные data-id модальным спусковую кнопку

<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td> 

Добавить вход type="hidden" модальным и передать значение id модальным скрытый вход, когда показано

Hidden Входной

<input type="hidden" id="RowId" value=""> 

режимное мероприятие show сценарий

$(document).ready(function(){ 
    $('#removeUser').on('show.bs.modal', function (e) { 
     var id = $(e.relatedTarget).data('id'); 
     $('#RowId').val(id); 
    }); 
}); 

Теперь с click событие

$('#remove-button').click(function() { 
     var delid = $('#RowId').val(); 
     //Do what ever you like to do 
     $.post('/API/removeUser', {}); 
}); 

Fiddle Example

---

Альтернативное решение

Вы можете пропустить hidden ввода и создать глобальную переменную

кнопку Модальные триггера с данными атрибутов data-id модальным гашетку

<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td> 

режимное Событие, функция Click с помощью скрипта глобальной переменной

$(document).ready(function() { 
    var delid = ''; //global variable 
    $('#removeUser').on('show.bs.modal', function(e) { 
    delid = $(e.relatedTarget).data('id'); //fetch value of `data-id` attribute load it to global variable 
    alert(delid); 
    }); 

    $('#remove-button').click(function() { 
    alert(delid); //Use the global variable here to del the record 
    //Do what ever you like to do 
    //$.post('/API/removeUser', {}); 
    }); 
}); 

Alternate Solution Example

Answer 2

Вы можете получить содержимое первой td из строки данной кнопки с получением этого:

var person = $(this).closest('tr').find('td').eq(0).html() 

скрипку: https://jsfiddle.net/7j4bmgbv/