I have an external js file I need to load in the header of a page. In traditional web it's easy. In preperation I add a server action (AddJavaScriptTag) and fill out the URL with the requested external .js file. (It has to be an external file, I can't download it)
When loading my testpage I see no errors in the console and in the network tab I get the 200 code. All works fine. The file has to load before the page renders (it puts some data in a div).
I don't want to build a traditional app though. It needs to be a reactive app. So I tried different methods to load the .js file.
1. Add the .js the same way as in traditional (AddJavaScriptTag in the On Initialize) nothing seems to happen. File is not loading according to the network tab.
2. Load via the client action "RequireScript": the .js file is being loaded according to the network tab but gives errors in the console. (Uncaught ReferenceError: URI is not defined)
3. Load via the following javascript I found on the forum:var head1 = document.getElementsByTagName('head')[0];var new_script1 = document.createElement('script');new_script1.type = 'text/javascript';new_script1.src = "<my external file>";new_script1.setAttribute ("data-os-finished", "true");new_script1.charset = "utf-8";head1.appendChild(new_script1);
Result: the .js file is being loaded according to the network tab but gives errors in the console. (Uncaught ReferenceError: URI is not defined)
According to out supplier this is because of the widgets to load with the .js file won't work when AMD (Asynchronous module definition) is active. I feel there must be a way to accomplish the correct loading of the.js file in reactive. Maybe someone can help me? Much appreciated.
Hi Chrisjon,
To use JavaScript in a Reactive application, you can just drag a JavaScript widget to your client action or event handler:
If you need to load an external JavaScript library, you can 1) add it on the Scripts folder under the Interface tab:
and 2) add the script on the required script on the block / screen you are going to be need it:
In any case, I strongly recommend the reading of the documentation about using JavaScript in OutSystems reactive application, that explains the topic better than I just did.
Kind Regards,João
Thank you for your answer. I think there's some misunderstanding. I know how to load the external .js file. I have only this file. This file loads other external .js files. That's how our suplier build it. It's located on their server (external).
The problem is, I think, the other external .js files in the file I call need to be run in the order the supplier ment. In traditional this goes automatically. In reactive it's seems random due to the Asynchronous module definition being active in reactive.
Maybe @Anthony Ouwehand can help? It's his solution that gave me some hope for an actual solution for my situation. In this Post
Working solution (traditional):
NOT-working solution (reactive)
And in my opinion the problem is in the data-os-finished=true addition behind the third line