web-dev-qa-db-fra.com

Récupérer les données d'un modal Bootstrap

J'ai une page d'inscription qui déclenche une fenêtre modale (en utilisant Bootstrap ) contenant par exemple une connexion Facebook et je veux que ce modal transmette des données (erreurs, ou en cas de succès les données de jeton/utilisateur) au fenêtre principale pour que je puisse remplir les champs du formulaire et laisser l'utilisateur terminer le processus d'inscription (cochez la case "J'approuve les termes et conditions", etc.).

Je sais comment faire tout cela sauf le bit sur l'envoi de données à la fermeture du modal. Existe-t-il un moyen de transmettre des données du modal à la fenêtre principale sur l'événement de fermeture modal?

EDIT: voici une représentation visuelle de ce que je veux accomplir: flow

jquerytwitter-bootstrapmodal-dialog
14
Davor

Bien. Vous avez accès à la fois à la fenêtre principale et au contenu modal, il vous suffit donc de copier le contenu des éléments modaux avant de fermer. Exemple de travail (copiez les deux blocs de code dans deux fichiers):

auth.php (je ne sais pas comment fonctionne votre authentification, mais peut-être que vous appelez une connexion à distance et obtenez des résultats, vous pouvez stocker dans un tableau JSON)

<label for="modal-username">Username</label><input type="text" name="modal-username" id="modal-username">
<?
$result = array();
$result['error']='error';
$result['auth']='auth';
$javascript_array = json_encode($result);
?>
<input type="hidden" id="modal-result" value='<? echo $javascript_array;?>'>

modal.html, fenêtre principale

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>

<!-- button to trigger modal -->
<a href="auth.php" data-target="#myModal" data-toggle="modal">remote modal</a>

<!-- hidden fields to store modal result in -->
<input type="hidden" id="main-username">
<input type="hidden" id="main-result">

<!-- modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal test</h3>
  </div>
  <div class="modal-body">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-primary" onclick="login();">Login</button>
  </div>
</div>​

<script type="text/javascript">
//called when user clicks login
function login() {
    $("#main-username").val($("#modal-username").val());
    $("#main-result").val($("#modal-result").val());
    $("#myModal").modal("hide");
}

//called when the modal is closed, logs values grabbed from the modal in login()
$('#myModal').on('hidden', function() {
    console.log('username : '+$("#main-username").val());
    console.log('result : '+$("#main-result").val());
})
</script>

</body>
</html>
17
davidkonrad

Bootstrap fournit la gestion des événements intégrée suivante pour y parvenir:

show.bs.modal - Se produit lorsque le modal est sur le point d'être affiché
shown.bs.modal - Se produit lorsque le modal est entièrement affiché (une fois les transitions CSS terminées)
hide.bs.modal - Se produit lorsque le modal est sur le point d'être caché
hidden.bs.modal - Se produit lorsque le modal est entièrement masqué (une fois les transitions CSS terminées)

Pour votre cas, vous pouvez utiliser l'événement hide.bs.modal pour obtenir les valeurs des attributs modaux après avoir cliqué sur le bouton et avant de masquer le modal. De cette façon, l'exemple donné par davidkonrad peut être réalisé en une seule fonction, éliminant le besoin d'attributs cachés intermédiaires.

    $('#myModal').on('hide.bs.modal', function () {    
    console.log('username : '+$("#modal-username").val());    
    console.log('result : '+$("#modal-result").val());    
})
7
Srini