Comment puis-je transmettre des données à un modal Bootstrap à l'aide de jQuery ?

Transmission de données à un modal Bootstrap

Lors de la création de pages Web interactives, la transmission de données entre les composants peut améliorer l'expérience utilisateur et rationaliser les fonctionnalités. Dans le contexte des modaux Bootstrap, le transfert de données entre le lien hypertexte de déclenchement et le modal lui-même peut fournir des informations ou un contexte supplémentaires à l'utilisateur.

Une approche pour transmettre dynamiquement des données à un modal Bootstrap consiste à utiliser l'événement .on de jQuery. gestionnaire. Cette méthode offre une flexibilité dans la capture des clics potentiels sur des éléments avec une classe spécifique, telle que "open-AddBookDialog".

$(document).on("click", ".open-AddBookDialog", function() {

Lorsque l'on clique sur un élément avec la classe "open-AddBookDialog", le gestionnaire d'événements s'exécute . Au sein de cette fonction, les données associées à l'élément cliqué peuvent être obtenues à l'aide de la méthode .data().

var myBookId = $(this).data('id');

Cet extrait récupère l'identifiant unique attaché au lien hypertexte cliqué et le stocke dans la variable myBookId.

Ensuite, l'élément d'entrée du corps modal avec l'ID "bookId" peut être ciblé à l'aide du sélecteur de jQuery. Ce champ de saisie est l'endroit où l'ID transmis sera inséré.

$(".modal-body #bookId")

Définir la valeur de cet élément d'entrée sur myBookId transfère efficacement l'ID du lien hypertexte vers le modal.

$(".modal-body #bookId").val( myBookId );

En remplissant dynamiquement le champ de saisie dans le modal, des informations précieuses sont transmises à partir du lien hypertexte, permettant des fonctionnalités modales personnalisées, telles que des recherches dans des bases de données ou un contenu personnalisé. display.

Enfin, il convient de noter qu'il n'est pas nécessaire d'appeler manuellement la fonction modal('show') pour afficher le modal. Bootstrap affiche automatiquement le modal une fois le transfert de données terminé.

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!