We Keep Coding

Cannot add external JavaScript file to React application

I have read all advices how to add external JavaScript file to React application but no one works for me. I'll describe my situation. I have created a tutorial React project and it works fine. Now I want to show a data that I get from server side in some grid , say, jqgrid. I have a JavaScript file that has a function showGrid() to show the grid. So I need to add this file to the project. More precisely I have a React component ShowInGrid and in
render()
method of it I write
let contents = this.state.loading
? <p><em>Loading...</em></p>
: ShowInGrid.renderGrid(this.state.data);
and then
static rendersGrid(data) {
return (
showGrid(data)
);
where showGrid is a function from JavaScript file. To reference to this file I used several ways:
in componentDidMount method I added
var script = document.createElement('script');
script.src = // path of external javascript file.
script.class = "external-script
document.body.appendChild(script);
I get a message
'showGrid' is not defined no-undef
I tried to use
import ScriptTag from 'react-script-tag';
with
< ScriptTag isHydrating={true} type="text/javascript" src="http://my path to js-file">
but I get the same result.
So I really need to know what's wrong and how properly to add JavaScript file to app. A real working example will be really appreciated.

Building an External JavaScript Reference Using a local script in HTML

I have around 45-50 unique javascripts that contain data to be used in a graph. I do not want to link every single one of them. Is there a way to create a single external reference tag and fill it with a string i create in the local java inside the HTML? That way it can update at my leisure and I don't have to external reference 50 unique scripts at any given time. Note this is not on a server strictly local only for now. Also, I have only been using javascript and HTML a couple of weeks so I am a novice.
I have tried to create a tag inside the script link such as:
<script id="builtstringreference"></script>
but it produces nothing.
I have built the string that references the external javascript but can not get it back to the external reference link.
What I have in HTML:
<script id="trial"></script>
What I have in local Javascript:
var txt1 = document.getElementById("Product").value;
var txt2 = document.getElementById("Reactor").value;
var trialchange = "../Lot Data Trial Folder/lotdata_"+txt1+"_"+txt2+".js"
document.getElementById("trial").innerHTML=trialchange;
window.alert(trialchange); //just for testing
window.alert(typeof(trialchange)); //just for testing
What I want it to look like after update:
<script src="an external j.s"></script>
That way the external j.s can be changed and updated at any time without preloading 50 external j.s
I expect that I can change the external file at any time by selecting new product combos from drop-down lists which update ```txt1 and txt2 which builds the new external reference string but I feel like it's not this easy.

use something like build and then destroy the script tag
function createjs(){
var script = document.createElement('script');
script.addEventListener('load', function(){ resolve(); });
script.id = 'id-scr1';
script.type = 'text/javascript';
script.src='assets/script.js'
document.head.appendChild(script);
}
createjs();
function removeJS(id){
document.getElementById( id ).remove();
}
removeJS('id-scr1');

Could not include javascript file dynamically using angular4 and Javascript

I am unable to include one javascript file dynamically inside angular4 submit method. I am explaining my code below.
onTextFormSubmit(){
this.processValidation = true;
if (this.textForm.invalid) {
return;
}
let urlValue = this.textForm.value;
let url = urlValue.url;
console.log('hello',url);
var script = document.createElement("SCRIPT");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
script.setAttribute('integrity', 'sha384-tEgmOghGBnPJQ3h63qzTE8V69SDVkIIyQeOFDfsG+AWJqA/UfZMmyQcXQVunl3wT');
script.setAttribute('crossorigin','anonymous');
document.getElementsByTagName("head")[0].appendChild(script);
}
Here the url parameter is coming from form submit which is like https://code.jquery.com/jquery-2.2.4.min.js this and I am including it dynamically but after submit when I am doing view page source and searching that file isnide the head tag, I did not found there which is my issue. I need to include this file dynamically.

Iv'e tested it in my environment and it also failed.
Iv'e got the following error:
Failed to find a valid digest in the 'integrity' attribute for
resource 'https://code.jquery.com/jquery-2.2.4.min.js' with computed
SHA-256 integrity 'BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44='. The
resource has been blocked.
After a little search I found this git issue that resolved it.
Simply add the following attribute to your script:
script.setAttribute('integrity','');
Edit:
If it's still doesn't work try this :
script.setAttribute('integrity','sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=');
script.setAttribute('crossorigin','anonymous');

Way to dynamically link to js scripts from client-side js?

Is there a way to dynamically link javascript pages based on client-side javascript logic? For example in client-side html code I want something like:
<script>
if(photoUpdate){
import "./phtoLoader.js" //Something like this?
}
</script>
I am currently using server side to supply dynamic script imports and it feels very inefficient.

You can create a dynamic script element and append to your document body.
function loadJS(file) {
var jsElm = document.createElement("script");
jsElm.type = "application/javascript";
jsElm.src = file;
document.body.appendChild(jsElm);
}

problems when creating a script tag to a local file in android webview

I have an Android application that consist in a simple WebView that load a local html file in the assets folder of the project.
The HTML has a tag that calls (AJAX) an external service and expects as a response a String that represent a .js filename (say, 'test.js').
In test.js there is a simple funcion declaration, as:
var testFunction = function(){
// some code here
}
The AJAX callback then construct via javascript a tag that points to the .js file and append it to the head of the document; then call the testFunction:
$.ajax('externalService').done(function(response){
var script = // construct the script tag;
$('head').append(script);
testFunction();
});
Important: the script tag points to an external .js file, like
<script src="http://justatest.com/test.js">
... and all works fine!
Now i try to do the same thing putting the test.js inside the assets folder of the project. Obviously i changed the src of the script created in the callback with a relative path:
<script src="test.js"></script>
but when i try to invoke the function testFunction i get an error (testFunction is not defined).
The local path is correct (i put jquery.js in the same local folder of test.js and loaded it directly in the html with a with no errors).
I put all the attributes (like type="text/javascript") in the tag as well...
so, why the webview doesn't load a local .js file in this way?
thank you :)
EDIT: I tried the solution found in this thread:
jQuery getScript not working in Android WebView when using Local Assets/HTML/Resources
and it worked!!!!

I tried the solution found in this thread:
jQuery getScript not working in Android WebView when using Local Assets/HTML/Resources
and it worked!
I report the solution:
var scriptUrl = "test.js";
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = scriptUrl;
script.onload = function() { alert("Success"); };
script.onerror = function(e) { alert("failed: " + JSON.stringify(e)); };
head.appendChild(script);
So if i use the jquery append() method it doesn't work, but if i use the javascript appendChild method it work...