To load and initialize multiple JS plugins on specific page in jQuery

Question

if ($(".section").length) {
  var script_arr = [
    'moment.js',
    'daterangepicker.js',
  ];
  $.getMultiScripts(script_arr);
}
$(function() {
  $('#date-picker').daterangepicker({
    "opens": "left",
    singleDatePicker: true,
    isInvalidDate: function(date) {
      var disabled_start = moment('09/02/2018', 'MM/DD/YYYY');
      var disabled_end = moment('09/06/2018', 'MM/DD/YYYY');
      return date.isAfter(disabled_start) && date.isBefore(disabled_end);
    }
  });
});

In the above code, I have loaded multiple scripts on specific page, but I'm unable to initialize those scripts properly.

`$.getMultiScripts(script_arr)` is asynchronous. You can use `$.holdReady()` or chain `.then()` to `$.getMultiScripts(script_arr)` then execute `jQuery()` within `.then()` callback. — guest271314, Feb 06 '19 at 02:56
See [How can I know when Ajax calls are finished with getScript?](https://stackoverflow.com/questions/38166563/how-can-i-know-when-ajax-calls-are-finished-with-getscript?) — guest271314, Feb 06 '19 at 03:04

score 1 · Accepted Answer · answered Feb 06 '19 at 02:59

it is because daterangepicker.js not yet loaded, execute the script in callback or done() function.

if ($(".section").length) {
  var script_arr = [
    'moment.js',
    'daterangepicker.js',
  ];
  $.getMultiScripts(script_arr).done(function() {
    $('#date-picker').daterangepicker({
      "opens": "left",
      singleDatePicker: true,
      isInvalidDate: function(date) {
        var disabled_start = moment('09/02/2018', 'MM/DD/YYYY');
        var disabled_end = moment('09/06/2018', 'MM/DD/YYYY');
        return date.isAfter(disabled_start) && date.isBefore(disabled_end);
      }
    });
  });
}

To load and initialize multiple JS plugins on specific page in jQuery

1 Answers1