Есть ли способ отправить идентификатор кнопки onClick модалу начальной загрузки? - PullRequest
Новая
       17

Есть ли способ отправить идентификатор кнопки onClick модалу начальной загрузки?

0 голосов
/ 09 января 2019

Используя laravel, у меня есть список пользовательских данных, полученных из базы данных, с кнопками редактирования и удаления в конце каждой записи. Когда я нажимаю кнопку удаления, конкретная запись удаляется, но когда я добавил модал, такой, что при нажатии кнопки удаления появляется модель, но добавление функциональности к кнопке подтверждения «Да» на модале становится сложным, так как Он удалил первую запись независимо от того, какого пользователя мне нужно удалить. Как заставить удаленного пользователя быть удаленным при нажатии модальной кнопки?

Я попытался назначить каждой кнопке идентификатор текущей строки. 

    @foreach($admins as $admin)
        <tr>
            <td>{{$admin['id']}}</td>
            <td>{{$admin['name']}}</td>
            <td>{{$admin['email']}}</td>
            <td>
            <button type="button" class="btn btn-block btn-danger"  data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}">Remove</button>
            </td>
        </tr>
    @endforeach

    <!-- The Button From Modal -->
    <button type="button" class="btn btn-outline">Remove</button>

Ответы [ 3 ]

0 голосов
/ 09 января 2019

Я сделал это с JS. Вы можете показать свой модал с $('#modal-danger').modal('show') Таким образом, вы можете добавить событие onClick к вашей кнопке, которое заполняет скрытый ввод.

Ваша кнопка, которая заставляет модальное появление: 

<button type="button" class="btn btn-block btn-danger" onClick="showModal({{$admin['id']}})">Remove</button>

Ваш скрытый ввод (где-то на вашей странице): 

<input type="hidden" id="id-to-remove" />

Ваша кнопка из модала: 

<button type="button" class="btn btn-outline" onclick="realRemove()">Remove</button>

Ваш JS: 

function showModal(id) {
    $('#id-to-remove').val(id);
    $('#modal-danger').modal('show');
}

function realRemove() {
    $('#modal-danger').modal('hide');
    var id = $('#id-to-remove').val();
    alert('You can now remove ID ' + id + ' from your database!');
}

Это должно работать

0 голосов
/ 09 января 2019

сделать глобальную переменную для хранения целевого идентификатора и присвоения ему идентификатора при нажатии кнопки в целевой строке 

<button type="button" class="btn btn-block btn-danger"  data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}" onClick=someFunction({{$admin['id']}})>Remove</button>

target_id=0
function someFunction(id) {
    target_id=id
}

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

это оптимальный способ сделать это, как я думаю, ура.

0 голосов
/ 09 января 2019

Поскольку вы используете jQuery, вы можете использовать метод attribute, чтобы получить текущий идентификатор пользователя, по которому щелкнули, и перейти к URL:

Ваш HTML-класс кнопки 

  $(".my-btn").click(function(){
   var userID = $(this).attr("data-user");

   if (typeof userID !== typeof undefined && userID !== false) {

      if(userID.length > 0) {
          // There you go the user id of the clicked user
          console.log(userID);
      }

   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="my-btn" data-user="user_id_123">Remove</button>

Я предлагаю вам обратиться по следующему URL-адресу для дальнейших вопросов, касающихся attr метода https://www.w3schools.com/jquery/html_attr.asp

...