Comment transmettre des variables $_GET d'un lien à un modal Bootstrap ?

Passer des variables $_GET d'un lien à un modal Bootstrap

Dans le contexte des modaux Bootstrap, transmettre avec succès des variables $_GET à partir de liens nécessite une approche prudente. Cet article présente différentes méthodes pour accomplir cette tâche, chacune avec ses propres avantages et considérations.

Solution simple avec un fichier PHP :

Cette solution consiste à créer un extrait de code dans votre Code HTML :

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Dans le HTML modal, récupérez les enregistrements de la base de données en fonction de l'ID transmis via le paramètre GET et affichez-les dans le modal.

Solution alternative avec Ajax et Bootstrap Modal Event Listener :

Cette solution utilise l'écouteur d'événement modal Bootstrap pour transmettre l'ID au modal sans utiliser de fichier PHP séparé. Dans le HTML du bouton d'appel modal, remplacez l'attribut href par un attribut data-id pour transmettre l'ID de la ligne :

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Dans le gestionnaire d'événements JavaScript du modal, récupérez les données via Ajax en utilisant l'ID et affichez-le dans le modal.

Solution alternative avec Ajax et jQuery Click Function :

Cette solution utilise la fonction de clic de jQuery pour lancer un appel Ajax afin de récupérer et d'afficher les données nécessaires. Dans le code HTML du bouton d'appel modal, modifiez la balise d'ancrage comme suit :

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs open-modal" href="">

Dans un fichier JavaScript séparé, écrivez le code Ajax suivant pour récupérer et afficher les données :

$(document).ready(function() {
  $('.open-modal').click(function() {
    var id = $(this).attr('id');
    $.ajax({
      type: 'post',
      url: 'file.php', // PHP file to fetch data
      data: 'post_id=' + id,
      success: function(data) {
        $('#editBox').show('show'); // Show modal
        $('.form-data').html(data); // Display fetched data
      }
    });
  });
});

Transmission des informations sur la page au modal :

Dans les cas où un minimum d'informations sur la page doivent être affichées dans le modal, vous pouvez y parvenir sans utiliser Ajax. Dans le code HTML du bouton d'appel modal, utilisez les attributs de données pour transmettre les valeurs :

<td data-placement="top" data-toggle="tooltip" title="Show">
  <a data-book-id="<?php echo $obj->id; ?>" data-name="<?php echo $obj->name; ?>" data-email="<?php echo $obj->email; ?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
  </a>
</td>

Dans le gestionnaire d'événements modaux associé, accédez aux valeurs transmises comme suit :

$('#editBox').on('show.bs.modal', function(e) {
  var bookid = $(e.relatedTarget).data('book-id');
  var name = $(e.relatedTarget).data('name');
  var email = $(e.relatedTarget).data('email');
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!