Passer des données à un modal bootstrap


527

J'ai quelques hyperliens auxquels chacun a un ID attaché. Lorsque je clique sur ce lien, je souhaite ouvrir un modal ( http://twitter.github.com/bootstrap/javascript.html#modals ) et transmettre cet ID au modal. 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 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 produit. Lorsque je donne l'hyperlien <a href="#addBookDialog" ...>, le modal s'ouvre très bien, mais il ne contient aucune donnée.

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

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

Réponses:


533

Je pense que vous pouvez faire ce travail en utilisant le gestionnaire d'événements .on de jQuery .

Voici un violon que vous pouvez tester; assurez-vous simplement d'étendre le cadre HTML dans le violon autant que possible afin de pouvoir visualiser le modal.

http://jsfiddle.net/Au9tc/605/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

2
Cela fonctionne bien lorsque je n'ai qu'un seul lien hypertexte, mais j'ai plusieurs liens hypertexte, chacun avec son propre ID. J'ai ajouté un deuxième lien hypertexte avec un autre ID, mais le modal a toujours l'ID du premier lien hypertexte.
Leon Cullens

1
@LeonCullens - J'ai mis à jour le violon et le code. Cela fonctionne-t-il comme vous le souhaitez maintenant?
mg1075

2
Bonne réponse - mais est-ce modal('show')nécessaire? On dirait que le data-toggle="modal"sur les liens s'en occuperait.
technophobie

7
juste $(this).data('id');était inestimable en soi! Je ne savais pas que vous pouviez obtenir les données avec cela. J'adore les bootstraps chaque jour! = P
Manatax

23
@Manatax - $(this).data()fait partie de jQuery. api.jquery.com/data/#data-html5
mg1075

366

Voici une façon plus propre de le faire si vous utilisez Bootstrap 3.2.0 .

Lien HTML

<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>

JavaScript modal

//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {

    //get data-id attribute of the clicked element
    var bookId = $(e.relatedTarget).data('book-id');

    //populate the textbox
    $(e.currentTarget).find('input[name="bookId"]').val(bookId);
});

http://jsfiddle.net/k7FC2/


1
$ (e.currentTarget) .find ('input [name = "bookId"]'). val (bookId); pouvez-vous me dire ce que cela fait? Donc, si le modal est ouvert, ce qui signifie que la valeur du nom d'entrée bookId est la valeur à partir de laquelle il a été cliqué à droite?
treblaluch

@treblaluch e.currentTargetest l'élément cliqué, qui est extrait de l'événement click e. Cette ligne trouve un inputavec le nom bookIdet y définit la valeur.
aalaap

5
remplaçant $(this)par des $(e.relatedTarget)œuvres formidables
Muhammad Ibnuh

1
C'est super,
ça

36

Voici comment je l'ai implémenté à partir du code de @ mg1075. Je voulais un code un peu plus générique pour ne pas avoir à assigner de classes aux liens / boutons de déclenchement modal:

Testé dans Twitter Bootstrap 3.0.3.

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>

JAVASCRIPT

$(document).ready(function() {

  $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

    var data_id = '';

    if (typeof $(this).data('id') !== 'undefined') {

      data_id = $(this).data('id');
    }

    $('#my_element_id').val(data_id);
  })
});

2
vous pouvez utiliser à la !! $(this).data('id') place detypeof $(this).data('id') !== 'undefined'
Haseeb Zulfiqar

13

Si vous êtes sur bootstrap 3+, cela peut être raccourci un peu plus si vous utilisez Jquery.

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">
            Modal Body
            <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

JQUERY

<script type="text/javascript">
    $(function () {
        $(".identifyingClass").click(function () {
            var my_id_value = $(this).data('id');
            $(".modal-body #hiddenValue").val(my_id_value);
        })
    });
</script>

10

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>


9

Bootstrap 4.3 - utilisez le code de l'extrait ci-dessous - plus ici


1

Voici comment envoyer les id_data à un modal:

<input
    href="#"
    data-some-id="uid0123456789"
    data-toggle="modal"
    data-target="#my_modal"
    value="SHOW MODAL"
    type="submit"
    class="btn modal-btn"/>

<div class="col-md-5">
  <div class="modal fade" id="my_modal">
   <div class="modal-body modal-content">
     <h2 name="hiddenValue" id="hiddenValue" />
   </div>
   <div class="modal-footer" />
</div>

Et le javascript:

    $(function () {
     $(".modal-btn").click(function (){
       var data_var = $(this).data('some-id');
       $(".modal-body h2").text(data_var);
     })
    });

1

Essayez avec ça

$(function(){
 //when click a button
  $("#miButton").click(function(){
    $(".dynamic-field").remove();
    //pass the data in the modal body adding html elements
    $('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
    //open the modal
    $('#myModal').modal('show') 
  })
})

Mais que se passe-t-il si vous fermez la boîte de dialogue et l'ouvrez pour un autre élément ... vous ajouterez 2 champs cachés et ce sera un gâchis une fois que vous aurez envoyé le formulaire de la boîte de dialogue
Pitzas

0

Vous pouvez essayer simpleBootstrapDialog . Ici, vous pouvez passer le titre, le message, les options de rappel pour annuler et soumettre etc ...


4
Bienvenue dans Stack Overflow! Bien que les liens soient un excellent moyen de partager des connaissances, ils ne répondront pas vraiment à la question s'ils se brisent à l'avenir. Ajoutez à votre réponse le contenu essentiel du lien qui répond à la question. Dans le cas où le contenu est trop complexe ou trop volumineux pour tenir ici, décrivez l'idée générale de la solution proposée. N'oubliez pas de toujours conserver une référence de lien vers le site Web de la solution d'origine. Voir: Comment écrire une bonne réponse?
sɐunıɔ ןɐ qɐp

0

C'est si facile avec jquery:

Si 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 modal, vous pouvez accéder à la balise d'ancrage 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')
    // ...
    // ...
})

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.