Модальное подтверждение начальной загрузки

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

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

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

Таблица HTML

<tr>
    <td>jsmith22</td>
    <td>John Smith</td>
    <td>555-555-5555</td>
    <td>[email protected]</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', {} );
});

javascript html jquery bootstrap-modal
person kernelpanic    schedule 24.01.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Это можно сделать с помощью модального прослушивателя событий Bootstrap

Добавить атрибут данных 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 в модальный скрытый ввод, когда он показан

Скрытый ввод

<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', {} );
});

Пример скрипта

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

Вы можете пропустить ввод 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>

Модальное событие, функция щелчка со скриптом глобальной переменной

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

Пример альтернативного решения

person Shehary    schedule 24.01.2016
comment
Спасибо! Именно то, что мне нужно. - person kernelpanic; 24.01.2016

arrow_upward
0
arrow_downward

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

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

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

person Cory    schedule 24.01.2016