Jquery Dynamically load JS script

Question

i am working on a project where i need to Dynamically load JS when needed and i having trouble with that. to keep things simple here is an example

<script type="text/javascript">
function DemoSelect2() {
    $('#s2_with_tag').select2({ placeholder: "Select OS" });
    $('#s2_country').select2();
}

// Run Select2 plugin on elements
$(document).ready(function () {

    LoadSelect2Script(DemoSelect2);
    WinMove();
});
</script>

<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-5">
<select class="populate placeholder" name="country" id="s2_country">
<option value="">-- Select a country --</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="it">Italy</option>
<option value="jp">Japan</option>
<option value="ru">Russia</option>
<option value="gb">United Kingdom</option>
<option value="us">United State</option>
</select>
</div>
</div>

I have in my JS.js script file this function to load the JS named select2.min.js the file is located on my folder named plugins and su folder named select2.

function LoadSelect2Script(callback){
if (!$.fn.select2){
    $.getScript('/plugins/select2/select2.min.js', callback);
}
else {
    if (callback && typeof(callback) === "function") {
        callback();
    }
}
   }

Note: I have already bundles to render Jquery UI and all the stuff. The problem is that the script are not loaded Update: the problem is that Getscript is trying to load the file from :Controlername/plugins/select2/select2.min.js and not from :Root/plugins/select2/select2.min.js How can i solve that ?

Answer 1

You might want to try the .done and .fail approach to see what error is happening. Maybe the "~" in the path is causing a problem. You can print out "exception".

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});