Modify a JavaScript variable dynamically using an external source

Question

Modify a JavaScript variable dynamically using an external source

I currently have two files named data1.js and data2.js. In data1.js, there is a variable defined as:

var rows = ['g1', 'g2'];

Whereas in data2.js, the variable is defined differently as:

var rows = ['g1', 'g2', 'g3', 'g4'];

Initially, I load data1.js using the following script tag:

<script id="datascript" type="text/javascript" src="data1.js"></script>

However, when a button is clicked, I try to load data2.js hoping it will update the variable rows with its contents:

onclick="datascript.src='data2.js';alert(rows);"

Unfortunately, despite changing the script source to data2.js, the rows variable does not update as expected. What could be causing this issue?

Thank you.

javascript

Answer 1

Answer №1

If you are encountering an issue where you are attempting to access the value of the rows variable before the second JavaScript file has been fully downloaded and executed by your browser, there is a solution:

You can utilize jQuery.getScript() - http://api.jquery.com/jQuery.getScript/ - which allows for a callback function to be triggered only after the script has been successfully fetched and run.

Code Example:

$('#datascript').remove();
$.getScript("data2.js", function(data, textStatus, jqxhr) {
   alert(rows);
});

Alternatively, if you prefer sticking to pure JavaScript, consider the following approach:

Reference:

// remove previous script element
var sElem = document.getElementById('datascript')
sElem.parentNode.removeChild(sElem);

// insert new script
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.id = 'datascript';
newScript.onload= function() {
   alert(rows);
};
newScript.src = 'data2.js';
document.getElementsByTagName("head")[0].appendChild(newScript);

Answer 2

If you are encountering an issue where you are attempting to access the value of the rows variable before the second JavaScript file has been fully downloaded and executed by your browser, there is a solution:

You can utilize jQuery.getScript() - http://api.jquery.com/jQuery.getScript/ - which allows for a callback function to be triggered only after the script has been successfully fetched and run.

Code Example:

$('#datascript').remove();
$.getScript("data2.js", function(data, textStatus, jqxhr) {
   alert(rows);
});

Alternatively, if you prefer sticking to pure JavaScript, consider the following approach:

Reference:

// remove previous script element
var sElem = document.getElementById('datascript')
sElem.parentNode.removeChild(sElem);

// insert new script
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.id = 'datascript';
newScript.onload= function() {
   alert(rows);
};
newScript.src = 'data2.js';
document.getElementsByTagName("head")[0].appendChild(newScript);

Modify a JavaScript variable dynamically using an external source

Answer №1

Similar questions

Why won't the button's color change when I try clicking on it?

Parsing JSON data repeatedly using JavaScript within an HTML environment

Is it possible to sort an array by both date and time simultaneously?

Using Javascript and ExtJS to retrieve the Codemirror Editor using a textarea

Jquery functionality fails to execute post-Ajax request

Automatically reload a particular webpage upon closing a pop-up window (using jQuery)

The React material-table only updates and rerenders the table when the data is updated twice

Using Ajax to dynamically load Wordpress post details and content into a designated div element

Node Pagination and Filtering feature malfunctioning

Why is it impossible for me to show the title "individual name:"?

What is the process for cancelling an interval when it is disabled in my configuration file?

React error: "Unable to locate property 'bind' within the undefined"

"Exploring the process of unsubscribing or disposing of an interval observable based on a certain condition in Angular2 or

Using a Javascript array within a Bootstrap carousel allows for dynamic content to

Using ng-repeat with an AJAX-called JSON is not possible

The server is throwing a 403 error when trying to submit an AJAX request

Activate the counter as soon as the error message appears

Tips for extracting CSS data with Selenium webdriver's executescript function

javascript varying functionality between Chrome and Firefox

Being required to design a distinct div for every article I am extracting from the API