La transmission des données à un modal bootstrap

J'ai un couple de liens hypertextes, qui ont chacun un ID relié. Lorsque je clique sur ce lien, je veux ouvrir un modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), et de transmettre ce code à l'modal. J'ai cherché sur google, mais je ne pouvais pas trouver quelque chose qui pourrait m'aider.

C'est le code:

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

Qui doit 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 le lien hypertexte, il ne se passe rien. Quand je donne le lien hypertexte <a href="#addBookDialog" ...>, la modale s'ouvre très bien, mais il ne contient pas toutes les données.

J'ai suivi cet exemple: Comment transmettre des valeurs des arguments à modale.show() dans le Bootstrap

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

InformationsquelleAutor Leon Cullens | 2012-05-16

502

Je pense que vous pouvez faire ce travail à l'aide de jQuery .sur gestionnaire d'événement.

Ici un violon, vous pouvez tester; assurez-vous simplement d'élargir le cadre HTML dans le violon comme beaucoup que possible de sorte que vous pouvez afficher 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');
});
```
- Cela fonctionne bien lorsque je n'ai qu'un lien hypertexte, mais j'ai plusieurs liens hypertexte, chacun avec leur propre IDENTITÉ. J'ai ajouté un deuxième lien hypertexte avec un autre ID, mais le modal a toujours l'ID de la première de lien hypertexte.
- J'ai mis à jour le violon et le code. Cela fonctionne de la manière que vous voulez maintenant?
- Génial, c'est exactement ce que je veux :)! Merci beaucoup d'avoir pris le temps de m'aider. L'espoir de retourner la faveur du temps ;)!
- Bonne réponse, mais est la modal('show') nécessaire? Semble que le data-toggle="modal" sur les liens de prendre soin de cela.
- Correct! Le data-toggle="modal" la $(...).modal('show') appel superflu. jsfiddle.net/55ZWe/1
- En fait, il n'est pas superflu d'appel modal dans le gestionnaire d'événements. Si vous le laissez à la data-toggle l'ordre les événements feu est à gauche du navigateur et n'est pas cohérente. Beaucoup mieux d'appeler le modal via JS.
- juste le $(this).data('id'); a pas de prix sur son propre! Je n'avais aucune idée que vous pourriez obtenir les données attribs avec qui. Je suis amoureuse de s'amorce plus chaque jour! =P
- fait partie de jQuery. api.jquery.com/data/#data-html5
- Ups... vous avez le droit (encore mieux)... je n'ai pas l'utiliser comme jQuery jusqu'à maintenant.
- Quelle est la meilleure option dans le cas où plus de données doit être indiqué sur le modal? Est-il mieux de faire un appel ajax ou pas?
- Il dépend. Avant d'appeler le modal, avez-vous déjà les données que vous souhaitez afficher dans le modal par un précédent appel ajax? Dans ce cas, vous pourriez tirer parti de plus de data- attributs. Pour l'exemple ci-dessus, supposons que vous aviez déjà le nom de l'auteur: vous pouvez vous servir de data-author="John Smith" de la même façon, le livre id est utilisé. Sinon, si vous n'avez pas les données déjà disponibles, il peut faire plus de sens de faire un ajax appel lors de l'ouverture du modal. C'est difficile à dire sans en savoir plus sur la page et les données que vous avez à traiter.
- merci pour la réponse rapide. Info est disponible sur la vue, plein d'objet. Mais au moment de choisir un utilisateur, les données sont présentées à partir du premier utilisateur dans la liste, je ne sais pas si je suis clair. Je viens de poser cette question dans un post si tu veux faire: stackoverflow.com/questions/24270955/...
- Merci pour la réponse très. Pourquoi quand je suis à l'aide de .click gestionnaire d'événement de la valeur, passés et rien ne se passe?
- Pas vraiment savoir votre situation, cela peut aider: stackoverflow.com/a/11878976/538962 peut-être que votre .click est sur la dynamique, l'ajout d'un élément...
- pour moi, l'événement de rappel est appelée après modale est affichée. j'ai eu à utiliser @LostInComputer répondre
InformationsquelleAutor mg1075
340

Ici est 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>
```
Modal JavaScript
```
//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/
- $e.currentTarget).find('input[name="bookId"]').val(bookId); pouvez-vous me dire à quoi ça sert? Donc, si le modal est ouvert signification la valeur de l'entrée nom bookId est la valeur à partir de laquelle il a cliqué droit?
- est l'élément cliqué, qui est pris dans l'événement click e. Cette ligne trouve une input avec le nom bookId et définit la valeur sur elle.
- remplacement de $(this) avec $(e.relatedTarget) fonctionne très bien
- J'aime cette réponse!
- Sauver la vie d'une réponse! 🙂
InformationsquelleAutor LostInComputer

Voici comment j'ai mis en œuvre ce travail de @mg1075 du code. Je voulais un peu plus de code générique afin de ne pas avoir à assigner des classes modales déclencher des liens/boutons:

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

vous pouvez utiliser !! $(this).data('id') au lieu de typeof $(this).data('id') !== 'undefined'

InformationsquelleAutor J W

Si vous êtes sur bootstrap 3+, ce peut être raccourcie un peu plus loin, si l'utilisation de 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>

InformationsquelleAutor VTStampede

Votre code aurait travaillé avec la bonne modale d'une structure html.

JS:

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

HTML:

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

InformationsquelleAutor phil

Dans le Bootstrap 4.3 l'utilisation de code à partir d'extrait de code ci-dessous - plus d' ici

JS:

$('#exampleModal').on('show.bs.modal', function (event) {
  let bookId = $(event.relatedTarget).data('bookid') 
  $(this).find('.modal-body input').val(bookId)
})

CSS:

a.btn.btn-primary.open-AddBookDialog {color: white }

HTML:

<!-- Initialize Bootstrap 4 -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- BUTTON -->

<a 
  class="btn btn-primary open-AddBookDialog" 
  data-toggle="modal" 
  data-target="#exampleModal" 
  data-bookid="@book.Id" 
  title="Add this item"
>Open</a>

<!-- MODAL -->

<div class="modal fade" id="exampleModal" 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=""/>
        <input type="text" class="form-control" id="recipient-name">    
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

InformationsquelleAutor Kamil Kiełczewski

0

Vous pouvez essayer simpleBootstrapDialog. Ici, vous pouvez passer le titre, le message, les options de rappel pour l'annuler et de le soumettre etc...
- Bienvenue à Débordement de Pile! Alors que les liens sont un excellent moyen de partage des connaissances, ils ne sont pas vraiment répondre à la question si ils se cassent dans l'avenir. Ajouter à votre réponse le contenu essentiel du lien qui répond à la question. Dans le cas où le contenu est trop complexe ou trop gros pour rentrer ici, de décrire l'idée générale de la solution proposée. N'oubliez pas de toujours garder un lien de référence pour la solution d'origine du site. Voir: Comment puis-je écrire une bonne réponse?
InformationsquelleAutor Jithin Vijayan

Vous devez vous connecter pour publier un commentaire.