3
votes

Existe-t-il un moyen d'envoyer l'identifiant du bouton onClick à un modal bootstrap?

En utilisant laravel, j'ai une liste de détails utilisateur obtenus à partir de la base de données avec un bouton d'édition et de suppression à la fin de chaque enregistrement. Lorsque je clique sur le bouton Supprimer, l'enregistrement particulier est supprimé, mais lorsque j'ai ajouté un modal tel que lorsque le bouton Supprimer est cliqué, un modèle apparaît, mais l'ajout de la fonctionnalité au bouton de confirmation "Oui" du modal est devenu délicat, il a supprimé le premier enregistrement, quel que soit l'utilisateur que je dois supprimer. Comment puis-je supprimer l'utilisateur cliqué lorsque l'utilisateur clique sur le bouton modal?

J'ai essayé d'attribuer à chaque bouton l'ID de la ligne actuelle.

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

php javascript bootstrap-4 laravel-5.7 adminlte

1 commentaires

Utilisez cette méthode pour bootstrap et jQuery, stackoverflow.com/questions/54104088/...

3 Réponses :

0
votes

Puisque vous utilisez jQuery, vous pouvez utiliser la méthode attribute pour obtenir l'ID utilisateur sur lequel vous avez cliqué et passer à l'URL:

Votre classe de bouton HTML

p >

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

  $(".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);
      }

   }
});

Je vous suggère de vous référer à l'URL suivante pour vos questions supplémentaires concernant la méthode attr https://www.w3schools.com/jquery/html_attr.asp

0 commentaires

0
votes

Je l'ai fait avec JS. Vous pouvez afficher votre modal avec $ ('# modal-danger'). Modal ('show') Vous pouvez donc ajouter à votre bouton un événement onClick qui remplit une entrée masquée.

Votre bouton qui fait apparaître le modal:

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

Votre entrée masquée (quelque part dans votre page ):

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

Votre bouton de modal:

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

Votre JS:

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

2 commentaires

Cela semble prometteur et a presque fonctionné. Juste un dernier problème. En cliquant sur le bouton modal, je veux que le

code Toute idée de comment procéder. Merci pour l'aide.

ou comment appeler HomeController @ delete dans la fonction realRemove ()? La suppression dans HomeController attend l'id

1
votes

créer une variable globale pour stocker l'id cible et lui associer l'id en cliquant sur le bouton de la ligne cible

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

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

puis créer une autre fonction à déclencher en cliquant sur le bouton de suppression dans le modèle et à partir de là, accédez à la variable globale de l'id cible

c'est la façon optimale de le faire car je peux penser à la joie.

0 commentaires