Extracting sender information in jQuery for Bootstrap iframe modal
I am trying to display a google map in a Bootstrap 4.0 beta modal.
I found this post and the code works, but I'm not fluent enough in jQuery to do what I need to do in Javascript. I also looked here to figure out how to get the sender, but I can't figure it out.
Let's say mine is <button>
declared like this:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?a-whole-bunch-of-gibberish"><i class="icon-food"></i> Graceland Directions</button>
... and in mine <footer>
, I have set the base modal ...
<footer>
<!-- Code for map modal -->
<div class="modal fade" id="google-map-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="close">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</footer>
I found this answer and this is exactly what I wanted to do, but the address is hardcoded in the example:
// Bootstrap modal Google Map
$('#google-map-modal').on('shown.bs.modal', (function() {
console.log("something happened");
var mapIsAdded = false;
return function() {
if (!mapIsAdded) {
$('.modal-body').html('<h1>Test</h1><br><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');
mapIsAdded = true;
}
};
})());
// Bootstrap modal Google Map
$('#google-map-modal').on('shown.bs.modal', (function() {
console.log("something happened");
var mapIsAdded = false;
return function() {
if (!mapIsAdded) {
$('.modal-body').html('<h1>Test</h1><br><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');
mapIsAdded = true;
}
};
})());
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Directions to Graceland</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img class="img-responsive" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/23/web-elvis-rex.jpg" alt="Fat Elvis" style="max-height: 200px;height: auto;width:auto">
<h1>The King!</h1>
<p>Here are directions to Graceland.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d13044176.127729293!2d-92.52026694322687!3d37.04286531005349!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington+D.C.%2C+DC!3m2!1d38.9071923!2d-77.0368707!4m5!1s0x87d57d31cebd7225%3A0xfd48f1ff0c23cb11!2sGraceland%2C+Elvis+Presley+Blvd%2C+Memphis%2C+TN+38116!3m2!1d35.047691199999996!2d-90.0260493!5e0!3m2!1sen!2sus!4v1504803828896"><i class="icon-food"></i> Graceland Directions</button>
<!-- Raw Google embed code -->
<!--
<iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d13044176.127729293!2d-92.52026694322687!3d37.04286531005349!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington+D.C.%2C+DC!3m2!1d38.9071923!2d-77.0368707!4m5!1s0x87d57d31cebd7225%3A0xfd48f1ff0c23cb11!2sGraceland%2C+Elvis+Presley+Blvd%2C+Memphis%2C+TN+38116!3m2!1d35.047691199999996!2d-90.0260493!5e0!3m2!1sen!2sus!4v1504803828896" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
</div>
<footer>
<!-- Code for map modal -->
<div class="modal fade" id="google-map-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="close">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
How do I update jQuery to capture the sender attribute data-source
and title of the button?
0
source to share
1 answer
Perhaps using event.relatedTarget ?
$('#your-modal').on('show.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
});
Update from OP:
This code got me over the finish line:
$('#google-map-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var locationName = button.text();
var locationUrl = button.attr('data-source');
var modal = $(this)
modal.find('.modal-title').text(locationName);
modal.find('.modal-body').html('<iframe src="'+locationUrl+'"width="100%" height="400" frameborder="0" style="border:0"></iframe>');
})
+1
source to share