Menu
I have a signup page that triggers a modal window (using Bootstrap) containing for example a Facebook login and I want this modal to pass back data (errors, or if success the token / user data) to the main window so I can fill the relevant form fields and let the user complete the signup process (tick the "I approve the terms and conditions" box etc.).
I know how to do all of it except the bit about sending data back when the modal closes. Is there a way to pass data from the modal to the main window on the modal close event?
EDIT: here is a visual representation of what I want to accomplish:
836
Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used. jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement.
modal('dispose') is a function defined to destroy the modal. The modal remains a part of the DOM even after using . modal('dispose'), this function only destroys the current instance of the modal component.
Well. You have access to both the main window and the modal content, so basically you just need to copy content from modal elements before closing. Working Example (copy the two codeblocks into two files) :
auth.php (dont know how your auth works, but perhaps you call a remote login and get some results, you can store in a JSON-array)
<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, main window
<!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>
Bootstrap provides the following inbuilt event handling to achieve this:
show.bs.modal - Occurs when the modal is about to be shown
shown.bs.modal - Occurs when the modal is fully shown (after CSS transitions have completed)
hide.bs.modal - Occurs when the modal is about to be hidden
hidden.bs.modal - Occurs when the modal is fully hidden (after CSS transitions have completed)
For your case you can use the hide.bs.modal event to get the values of the modal attributes after the button is clicked and before the modal is hidden. By this way the example given by davidkonrad can be achieved in a single function eliminating the need for intermediate hidden attributes.
$('#myModal').on('hide.bs.modal', function () {
console.log('username : '+$("#modal-username").val());
console.log('result : '+$("#modal-result").val());
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
