javascript - load get remote link into bootstrap modal box -
i need load google map link(remote) after open modal box.
html:
<a data-toggle="modal" href="#mymodal" class="btn btn-primary">launch modal</a> <div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">modal title</h4> </div> <div class="modal-body">location: <input type="text" id="us2-address" style="width: 200px" />radius: <input type="text" id="us2-radius" /> <div id="us2" style="height: 400px;"></div>lat.: <input type="text" id="us2-lat" />long.: <input type="text" id="us2-lon" /> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">close</a> <a href="#" class="btn btn-primary" id="save-changes">save changes</a> </div> </div> </div> </div> js:
var stillpresent = false; $('#mymodal').on('shown.bs.modal', function (e) { if(stillpresent == false){ $('#us2').locationpicker({ location: { latitude: 46.15242437752303, longitude: 2.7470703125 }, radius: 300, inputbinding: { latitudeinput: $('#us2-lat'), longitudeinput: $('#us2-lon'), radiusinput: $('#us2-radius'), locationnameinput: $('#us2-address') } }); stillpresent = true; } }) google map link :http://maps.google.com/maps/api/js?sensor=false&libraries=places
demo : http://jsfiddle.net/lzv7w/9/
if add google map link external resources jsfiddle worked. need load google map link after open modal.
how load ?
google has nice tutorial herethat may you. , code below should fix problem. note may not work jsfiddle, should work on real page.
var stillpresent = false; function initialize() { if (stillpresent == false) { $('#us2').locationpicker({ location : { latitude : 46.15242437752303, longitude : 2.7470703125 }, radius : 300, inputbinding : { latitudeinput : $('#us2-lat'), longitudeinput : $('#us2-lon'), radiusinput : $('#us2-radius'), locationnameinput : $('#us2-address') } }); stillpresent = true; } } function loadscript() { var script = document.createelement('script'); script.type = 'text/javascript'; script.src = 'http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize'; document.body.appendchild(script); } $('#mymodal').on('shown.bs.modal', function(e) { loadscript(); }); also, here link similar question.
Comments
Post a Comment