Comment transmettre des données d'un lien hypertexte à un modal Bootstrap ?

Transmission de données à un modal Bootstrap

Dans le développement Web, la capacité de transmettre des données entre les éléments est cruciale pour les applications interactives. Avec les fenêtres contextuelles modales Bootstrap, vous pouvez rencontrer un scénario dans lequel vous devez transférer des données d'un lien hypertexte vers un modal lors de son ouverture. Cet article vous guidera tout au long du processus pour y parvenir de manière transparente.

Considérez une situation dans laquelle vous avez des hyperliens avec des identifiants uniques. Lorsqu'ils sont cliqués, ces liens doivent ouvrir un modal et le remplir avec l'ID correspondant. Pour y parvenir, vous pouvez modifier le code HTML et JavaScript comme suit :

HTML :

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog">></a>

<div class="modal hide">

JavaScript :

$(".open-AddBookDialog").click(function () {
    $('#bookId').val($(this).data('id'));
    $('#addBookDialog').modal('show');
});

Cependant, l’utilisation de l’approche ci-dessus peut ne pas donner le résultat souhaité. Pour résoudre ce problème, envisagez d'utiliser le gestionnaire d'événements .on plus robuste de jQuery :

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // It is unnecessary to manually call the modal.
});

Ce code JavaScript mis à jour garantit que les données sont transmises correctement du lien hypertexte au champ de saisie masqué du modal lorsque le modal est ouvert. En utilisant le gestionnaire d'événements .on de jQuery, vous pouvez capturer et gérer dynamiquement les événements, résolvant ainsi les problèmes rencontrés précédemment.

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!