Using jQuery's append function will retrieve external source files within script tags, however, it will not officially render them in the DOM

Question

Using jQuery's append function will retrieve external source files within script tags, however, it will not officially render them in the DOM

After including a script with an external source and attempting to parse it using jQuery, the script is downloaded but not loaded into the DOM. This issue persists regardless of which jQuery DOM insertion method I use, such as .append().

Take a look at this example in Stack Snippets

$(function(){
  
  var selet2Html =
    '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
    '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
    '<select class="select2">' +
    '  <option value="AK">Alaska</option>' +
    '  <option value="HI">Hawaii</option>' +
    '</select>' +
    '<script >' +
    '  $(function() {' +
    '    $(".select2").select2();' +
    '  });' +
    '<\/script>';
    
  $("body").append(selet2Html);
  
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

Despite showing that the script has been downloaded in the network tab, an error occurs indicating that the external library (select2) was never loaded:

This problem still remains when using $.getScript(). Since I'm loading the string dynamically with .load(), I'm uncertain if it will contain any external scripts or not.

What steps should I take to successfully load the external library?

javascript jquery dom src script-element

Answer 1

Answer №1

As dandavis mentioned, it is important to allow the library to fully load before initializing it. A simple approach would be to wait for a short period of time and then try again, like so:

setTimeout( function() {
  $(".select2").select2();
}, 2000);

Check out the Simple Demo in Stack Snippets:

$(function(){
  
  var select2Html =
    '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
    '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
    '<select class="select2">' +
    '  <option value="AK">Alaska</option>' +
    '  <option value="HI">Hawaii</option>' +
    '</select>' +
    '<script >' +
    '  setTimeout( function() {' +
    '    $(".select2").select2();' +
    '  }, 2000);' +
    '<\/script>';
   
  $("body").append(select2Html);
  
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

A more advanced solution involves waiting until $.fn.select2 is available in the DOM.

Introducing the OnAvailable Function

You can use this function as follows:

onAvailable('$.fn.select2', function() {
  alert('Success');
});

Below is the function that will continuously check for the variable within the global namespace to become available. It utilizes Alnitak's Object.byString solution from Accessing nested JavaScript objects with string key

function onAvailable(listenFor, callback) {
  var interval = window.setInterval(function() {
    if (Object.byString(window, listenFor)) {
      clearInterval(interval);
      callback()
    }
  }, 100);
};

Explore the Advanced Demo in Stack Snippets

function onAvailable(listenFor, callback) {
  var interval = window.setInterval(function() {
    if (objectFromString(window, listenFor)) {
      clearInterval(interval);
      callback()
    }
  }, 100);
};

function objectFromString(o, s) {
  s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
  s = s.replace(/^\./, '');           // strip a leading dot
  var a = s.split('.');
  for (var i = 0, n = a.length; i < n; ++i) {
    var k = a[i];
    if (k in o) {
      o = o[k];
    } else {
      return;
    }
  }
  return o;
}

$(function(){
  
  var select2Html =
    '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
    '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
    '<select class="select2">' +
    '  <option value="AK">Alaska</option>' +
    '  <option value="HI">Hawaii</option>' +
    '</select>' +
    '<script >' +
    '  onAvailable("$.fn.select2", function() {' +
    '    $(".select2").select2();' +
    '  });' +
    '<\/script>';
   
  $("body").append(select2Html);
  
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

Answer 2

As dandavis mentioned, it is important to allow the library to fully load before initializing it. A simple approach would be to wait for a short period of time and then try again, like so:

setTimeout( function() {
  $(".select2").select2();
}, 2000);

Check out the Simple Demo in Stack Snippets:

$(function(){
  
  var select2Html =
    '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
    '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
    '<select class="select2">' +
    '  <option value="AK">Alaska</option>' +
    '  <option value="HI">Hawaii</option>' +
    '</select>' +
    '<script >' +
    '  setTimeout( function() {' +
    '    $(".select2").select2();' +
    '  }, 2000);' +
    '<\/script>';
   
  $("body").append(select2Html);
  
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

A more advanced solution involves waiting until $.fn.select2 is available in the DOM.

Introducing the OnAvailable Function

You can use this function as follows:

onAvailable('$.fn.select2', function() {
  alert('Success');
});

Below is the function that will continuously check for the variable within the global namespace to become available. It utilizes Alnitak's Object.byString solution from Accessing nested JavaScript objects with string key

function onAvailable(listenFor, callback) {
  var interval = window.setInterval(function() {
    if (Object.byString(window, listenFor)) {
      clearInterval(interval);
      callback()
    }
  }, 100);
};

Explore the Advanced Demo in Stack Snippets

function onAvailable(listenFor, callback) {
  var interval = window.setInterval(function() {
    if (objectFromString(window, listenFor)) {
      clearInterval(interval);
      callback()
    }
  }, 100);
};

function objectFromString(o, s) {
  s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
  s = s.replace(/^\./, '');           // strip a leading dot
  var a = s.split('.');
  for (var i = 0, n = a.length; i < n; ++i) {
    var k = a[i];
    if (k in o) {
      o = o[k];
    } else {
      return;
    }
  }
  return o;
}

$(function(){
  
  var select2Html =
    '<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>' +
    '<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js" ><\/script>' +
    '<select class="select2">' +
    '  <option value="AK">Alaska</option>' +
    '  <option value="HI">Hawaii</option>' +
    '</select>' +
    '<script >' +
    '  onAvailable("$.fn.select2", function() {' +
    '    $(".select2").select2();' +
    '  });' +
    '<\/script>';
   
  $("body").append(select2Html);
  
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

Using jQuery's append function will retrieve external source files within script tags, however, it will not officially render them in the DOM

Take a look at this example in Stack Snippets

Answer №1

Check out the Simple Demo in Stack Snippets:

Explore the Advanced Demo in Stack Snippets

Similar questions

Remove the initialization of the jQuery UI portlet

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

Performing three consecutive Ajax requests in a Rails application

utilizing props to create a navigational link

Implementing a Collapse and Expand All feature within an Accordion Component

Implementing custom validation in React to dynamically enable/disable buttons

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

What methods are available for retrieving specific XML entries using JavaScript?

Having trouble choosing elements with angular.element within ng-repeat loop

How can I extract an array of objects from an array of arrays containing objects?

Transmitting the Flag between PHP and JavaScript

Cookies in Node.js Express are not being incorporated

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

Capturing Screenshots with Ionic Framework

I am unable to select the first item when using select2.js and setting a placeholder

Echarts: scatter plots linked with a line to the axis (resembling the PACF diagram)

Basic color scheme

Respond to a recommendation with a response

Attempting to access a variable without wrapping it in a setTimeout function will

What could be the reason for the esm loader not recognizing my import?