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

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -