jQuery getfile(); in bootstrap modal box

Question

I need to load external .js file using jQuery getfile(); when open bootstrap3 modal box.

JS:

 $(document).ready(function () {
var stillPresent = false;
$('#myModal').on('shown.bs.modal', function (e) {
        $.getScript("http://localhost/user/js/data.js");

        if(stillPresent == false){
               $('#us2').locationpicker({
            location: {
                latitude: 35.722606,
                longitude: 51.3843825
            },
            radius: 300,
            inputBinding: {
                latitudeInput: $('#us2-lat'),
                longitudeInput: $('#us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });
        }
    })

}); 

HTML:

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

Problem: this Code NOT load .js file after open modalbox. I need to load data.js after click and open modal box.

How do can I fix my code and load this?

Answer 1

I believe it's a sync issue, as you are not using the callback after the script load, the second param of getScript is the success callback.

$.getScript( "http://localhost/user/js/data.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

See if this is happening, and continue your code in the callback as it fits your needs.

Best.