Passer des données à une modale bootstrap

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

Answer 1

Essayez avec ceci

$(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') 
  })
})

Answer 2

Pour mettre à jour une valeur href, par exemple, je ferais quelque chose comme :

<a href="#myModal" data-toggle="modal" data-url="http://example.com">Show modal</a>

$('#myModal').on('show.bs.modal', function (e) {
    var url = $(e.relatedTarget).data('url');
    $(e.currentTarget).find('.any-class').attr("href", "url");
})

Answer 3

Voici comment vous pouvez envoyer les données id_data à une modale :

<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);
     })
    });

Answer 4

J'ai trouvé ça qui marche pour moi :

Dans le lien :

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>

Dans le modal :

<div id="message<?php echo $row['id'];?>" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <?php echo $row['id'];?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Answer 5

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

Pour utiliser ce plugin, incluez le fichier simpleBootstrapDialog.js comme ci-dessous

<script type="text/javascript" src="/simpleDialog.js"></script>

Utilisation de base

<script type="text/javascript>
$.simpleDialog();
</script>

Titre et description personnalisés

$.simpleDialog({
  title:"Alert Dialog",
  message:"Alert Message"
});

Avec rappel

<script type="text/javascript>
$.simpleDialog({
    onSuccess:function(){
        alert("You confirmed");
    },
    onCancel:function(){
        alert("You cancelled");
    }
});
</script>