Passer des données à une modale bootstrap

Question

Passer des données à une modale bootstrap

Demandé el 16 de Mai, 2012: Quand la question a-t-elle été
85020 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai deux hyperliens auxquels est associé un identifiant. Lorsque je clique sur ce lien, je veux ouvrir une modale ( http://twitter.github.com/bootstrap/javascript.html#modals ), et transmettre cet ID à la modale. J'ai cherché sur google, mais je n'ai rien trouvé qui puisse m'aider.

Voici le code :

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

Qui devrait s'ouvrir :

<div class="modal hide" id="addBookDialog">
    <div class="modal-body">
        <input type="hidden" name="bookId" id="bookId" value=""/>
    </div>
</div>

Avec ce morceau de code :

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

Cependant, lorsque je clique sur l'hyperlien, rien ne se passe. Lorsque je donne à l'hyperlien <a href="#addBookDialog" ...> la modale s'ouvre bien, mais elle ne contient pas de données.

J'ai suivi cet exemple : Comment passer des arguments de valeurs à la fonction modal.show() dans Bootstrap

(et j'ai aussi essayé ceci : Comment définir la valeur d'entrée dans un dialogue modal ? )

Demandé el 16 de Mai, 2012 par Leon Cullens

0 votes

Nous devrions mettre à jour le code vers un code récent, avec bootstrap5 et avec du JS pur comme option en plus de jquery.

Commenté el 8 de Juillet, 2022 par Timo

0 votes

Pouvez-vous passer le modèle entier sans Jquerey

Commenté el 31 de Août, 2022 par Mohammad jouhari

Answer 1

5 Réponses

Answer 2

11voto

phil Points 262

Votre code aurait fonctionné avec une structure html modale correcte.

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

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

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

<div id="addBookDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
       <input type="hidden" name="bookId" id="bookId" value=""/>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</html>

Répondu el 7 de Juin, 2017 par phil (262 Points )

Answer 3

8voto

Herbert Van-Vliet Points 363

Je suis avec bootstrap 5 et je ne peux pas montrer() la modale avec script moi-même en raison de contraintes hors de mon contrôle, donc je suis dépendant des propriétés data-bs-toggle et data-bs-target du bouton qui fait apparaître la modale.

Bootstrap expose cependant quelques événements ( https://getbootstrap.com/docs/5.0/components/modal/ ), à laquelle nous pouvons accrocher du code comme suit :

document.getElementById('idModal').addEventListener('show.bs.modal', (e) => {
    console.log(e.relatedTarget);
});

Dans relatedTarget, nous trouverons les attributs de données spécifiés dans l'ensemble de données, par exemple si nous avons un élément qui ressemble à ceci :

<button
    class="btn btn-secondary"
    data-id="fk_articles"
    data-bs-toggle="modal"
    data-bs-target="#documentationModal">
        Documentation
</button>

Ensuite, nous pouvons atteindre fk_articles par le biais :

console.log( e.relatedTarget.dataset.id )

Répondu el 21 de Février, 2022 par Herbert Van-Vliet (363 Points )

0 votes

J'ai dû adapter légèrement votre version pour qu'elle fonctionne avec TypeScript/Angular, mais cela fonctionne et c'est la réponse la plus propre à mon avis ! Dans mon cas, il a considéré le e comme un événement NORMAL, mais c'était un CustomEvent. De ce fait, il ne trouve pas le relatedTarget propriété de e . J'ai dû écrire (e as any).relatedTarget pour avoir accès à son identifiant !

Commenté el 22 de Mars, 2022 par MikhailRatner

Answer 4

7voto

Ehsan Ahmadi Points 4

C'est si facile avec jquery :

Si le lien ci-dessous est votre lien d'ancrage :

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

Dans l'événement show de votre modale, vous pouvez accéder à la balise anchor comme ci-dessous

//triggered when modal is shown
$('#modal_id').on('shown.bs.modal', function(event) {

    // The reference tag is your anchor tag here
    var reference_tag = $(event.relatedTarget); 
    var id = reference_tag.data('id')
    // ...
    // ...
})

Répondu el 3 de Mai, 2020 par Ehsan Ahmadi (4 Points )

Answer 5

4voto

shaurya airi Points 61

Bootstrap 4.0 donne une option pour modifier les les données modales en utilisant jquery : https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Voici la balise script sur la docs :

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Cela fonctionne pour la plupart. Seul l'appel à la modale ne fonctionnait pas. Voici une modification sur le script qui fonctionne pour moi :

$(document).on('show.bs.modal', '#exampleModal',function(event){
... // same as in above script
})

Répondu el 11 de Octobre, 2020 par shaurya airi (61 Points )

0 votes

C'est "la" réponse !

Commenté el 18 de Novembre, 2020 par frhack

Answer 6

3voto

Unicco Points 56

Je trouve cette approche utile :

Créez un événement de clic :

$( button ).on('click', function(e) {
    let id = e.node.data.id;

    $('#myModal').modal('show', {id: id});
});

Créer l'événement show.bs.modal :

$('#myModal').on('show.bs.modal', function (e) {

     // access parsed information through relatedTarget
     console.log(e.relatedTarget.id);

});

Extra :

Faites votre logique dans show.bs.modal pour vérifier si les propriétés sont analysées, comme par exemple comme ceci : id : ( e.relatedTarget.hasOwnProperty( 'id' ) ? e.relatedTarget.id : null )

Répondu el 3 de Septembre, 2020 par Unicco (56 Points )

Passer des données à une modale bootstrap

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Passer des données à une modale bootstrap

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: