35
Views
6
Comments
JavaScript error
Question


At the moment I am developing a Reactive Web App and I am trying to inject the following JavaScript:


Up to this point it is going well, because the javascript is actually loading as you can see below:


The only problem is that I am getting a few JavaScript errors as you can see below. All these libraries are provided within the code above (like KnockoutJS) but for some reason OutSystems is not able to deal with this, while implementing the same code in a "normal" website is not giving any problems. Does anybody has an idea why this is happening? Thanks!


Ps: I already tried to append it to body and head and it does not make a difference.

mvp_badge
MVP
Rank: #17

Hi Bart,

Why not do it the OutSystems way:

https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_and_Reactive_Apps_Using_JavaScript/Use_JavaScript_Code_from_an_External_Library

Is there a hard required to load those files remotely, and be dependent on their availability?

To dynamically load external script this should be the minimal code in for example the OnInitialize event of your screen in a JavaScript widget:


var head1 = document.getElementsByTagName('head')[0];
var script_src1= "your_js_url_with_parameters";
var new_script1 = document.createElement('script');
new_script1.type = 'text/javascript';
new_script1.src= script_src1;
head1.appendChild(new_script1);
 

Regards,

Daniel

Rank: #962

Daniël Kuhlmann wrote:

Hi Bart,

Why not do it the OutSystems way:

https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_and_Reactive_Apps_Using_JavaScript/Use_JavaScript_Code_from_an_External_Library

Is there a hard required to load those files remotely, and be dependent on their availability?

To dynamically load external script this should be the minimal code in for example the OnInitialize event of your screen in a JavaScript widget:
var head1 = document.getElementsByTagName('head')[0];
var script_src1= "your_js_url_with_parameters";
var new_script1 = document.createElement('script');
new_script1.type = 'text/javascript';
new_script1.src= script_src1;
head1.appendChild(new_script1);
 

Regards,

Daniel

 Hi Daniel,


Thanks for your reply. I will take a look into it after the weekend.


Regards,


Bart

 

Rank: #962

Daniël Kuhlmann wrote:

Hi Bart,

Why not do it the OutSystems way:

https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_and_Reactive_Apps_Using_JavaScript/Use_JavaScript_Code_from_an_External_Library

Is there a hard required to load those files remotely, and be dependent on their availability?

To dynamically load external script this should be the minimal code in for example the OnInitialize event of your screen in a JavaScript widget:


var head1 = document.getElementsByTagName('head')[0];
var script_src1= "your_js_url_with_parameters";
var new_script1 = document.createElement('script');
new_script1.type = 'text/javascript';
new_script1.src= script_src1;
head1.appendChild(new_script1);
 

Regards,

Daniel

 Hi Daniel,


I added an OnInitialize event with the JavaScript below. This still results in the getting the same error messages. Do you have any other ideas on how to overcome this issue?


As you can see below, the JavaScript is being implemented.


 

mvp_badge
MVP
Rank: #17

Hi Bart,

I don't know without getting my hands dirty on the code, and don't have time for that.

But I have past experience with KendoJS, and it tries to do similar things as ReactJS, so not sure if there can be conflicting code between the two UI frameworks in respect to UI input bindings.

What I know of ReactJS that it will remove html elements added outside their libary that it doesn't know about, so maybe that is causing the problem.

The fact that the KO global variable is not correctly initiated with KendoJs sees to point in that direction.

Try to load the JS scripts the OutSystems way (as resources) then see if the problem still exists, I know it is not optimal but at least it could help you find out the root cause of the problem you have right now.

Regards,

Daniel

Rank: #962

Daniël Kuhlmann wrote:

Hi Bart,

I don't know without getting my hands dirty on the code, and don't have time for that.

But I have past experience with KendoJS, and it tries to do similar things as ReactJS, so not sure if there can be conflicting code between the two UI frameworks in respect to UI input bindings.

What I know of ReactJS that it will remove html elements added outside their libary that it doesn't know about, so maybe that is causing the problem.

The fact that the KO global variable is not correctly initiated with KendoJs sees to point in that direction.

Try to load the JS scripts the OutSystems way (as resources) then see if the problem still exists, I know it is not optimal but at least it could help you find out the root cause of the problem you have right now.

Regards,

Daniel

 Hi Daniel,


Thanks for your reply. I will try to sort out the problem that way.

 

Staff
Rank: #1263

Hi all,

I found out why the 'ko' object was not loading. I think due to the asynchronous nature of Reactive Web apps, the mechanism of loading this external library is different than normal. I found 1 solution which led to a 2nd solution. Both require you to reference the path of the Knockout JavaScript library. In this case "https://include.timeblockr.com/v1/5.4.0.0/assets/knockout/knockout-3.4.1.min.js"

In the "OnReady" of your screen you should bring in a Client Action called "RequireScript" from the (System) dependency. Here you should put the URL of the Knockout JavaScript library. It has to be in the Screen and I confirmed that it does not work in a Web Block. This solution showed me that in Reactive Web, an attribute "data-os-finished" is added with a value of "true". It seems that Reactive Web is detecting this attribute to process scripts. My best guess is that on render event visits the scripts that have that attribute. I haven't been able to fully confirm how that attribute works. Nevertheless, it means that if you want to use the injection method described in the OPs post or elsewhere in the forums, you only have to add that attribute for it to work. Without the attribute, the <script> tag is injected but it does not execute.

This will work if you don't want to use RequireScript:

var head1 = document.getElementsByTagName('head')[0];
var new_script1 = document.createElement('script');
new_script1.type = 'text/javascript';
new_script1.src = "https://include.timeblockr.com/v1/5.4.0.0/assets/knockout/knockout-3.4.1.min.js";
new_script1.setAttribute ("data-os-finished", "true");
new_script1.charset = "utf-8";
head1.appendChild(new_script1);

I hope that will help someone down the line.