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? )

javascript jquery asp.net-mvc twitter-bootstrap Leon Cullens
la source

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');
});
mg1075
la source
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/

LostInComputer
la source
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);
  })
});
JW
la source
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>
VTStampede
la source
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>
Développer l'extrait

phil
la source
9

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

Afficher l'extrait de code

Kamil Kiełczewski
la source
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);
     })
    });
abhishek rana
la source
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') 
  })
})
Dey-Dey
la source
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 ...

Jithin Vijayan
la source
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')
    // ...
    // ...
})
Ehsan Ahmadi
la source