How can I include and use a Javascript Library?

Get help using Construct 2

Post » Wed Feb 26, 2014 3:58 am

I want to make use of a javascript library that's fairly easy to use (just include the script, then call a few functions). I'm not sure how to do that in C2 without making a plugin. I find the Execute Javascript action in the browser plugin but that's as far as I've gotten.
B
11
S
2
G
3
Posts: 283
Reputation: 1,968

Post » Wed Feb 26, 2014 4:10 am

Invlude the file in the files for C2.
Use Execjs and stadard JS called to insert a new script into the document.head
then use execjs to call the api
B
90
S
18
G
9
Posts: 2,455
Reputation: 15,028

Post » Wed Feb 26, 2014 4:27 am

Perfect, thanks! One more question, what is the path to the files uploaded to C2?

EDIT: Also, can I access variables made in JS in C2 expressions? I'm not quite sure I understand how the Browser.ExecJS works in terms of what it returns. E.g. if in that JS I assign some JS var variable1 to something how can I access it or return it?
B
11
S
2
G
3
Posts: 283
Reputation: 1,968

Post » Wed Feb 26, 2014 5:10 am

Hmm almost there but not quite working. So far I have this:

Code: Select all
var loader = document.createElement('script'); 
loader.type='text/javascript'; 
loader.src = 'myscript.js'; 
document.getElementsByTagName('head')[0].appendChild(loader); "


in an execJS action. When I do this 'myscript.js' shows under Sources in chrome dev tools.

Next, I try to use the function FunctionA from the library in a browser ExecJS expression, but I get "Reference error: FunctionA is not defined"

What am I doing wrong?
B
11
S
2
G
3
Posts: 283
Reputation: 1,968

Post » Wed Feb 26, 2014 6:23 am

Looks like it's because it takes a while for the js script to load, and the C2 action does not wait for that to happen prior to calling FunctionA. A 'Wait' as a sloppy workaround works, but is there a better method?
B
11
S
2
G
3
Posts: 283
Reputation: 1,968

Post » Wed Feb 26, 2014 6:53 am

I don't think you can have a trigger in C2 "on load" for this.
But you could, after the first execJS action where you happen the script, activate a group in C2. This group would just have one event, a condition checking in the FunctionA is defined. Once this event gets triggered (aka the library is loaded), you can call a function in your events that will handle the next steps, and un-activate this group.
Or you could have your external script do an action on load, like simulate a click on a button. If you added this button in C2 (setting an ID, making it invisible), the event "onclick" (the C2's one, in the event sheet) should be triggered.
B
17
S
8
G
4
Posts: 473
Reputation: 6,191

Post » Wed Feb 26, 2014 7:06 am

Use ajax to load js file, then you could get js code string at "On completed" triggers , does it work?
B
108
S
26
G
272
Posts: 4,471
Reputation: 152,277

Post » Wed Feb 26, 2014 7:19 am

I don't think loading a js files works with ajax, it needs to be included as a script. I'm not sure how to do that with ajax. The method I'm using now injects it into the document header as a script.

I'll see if there's a way to check if a function exists with JS though, that might work.
B
11
S
2
G
3
Posts: 283
Reputation: 1,968

Post » Wed Feb 26, 2014 7:36 am

If you retrieve the string from the js file using Ajax, you can execJS this script and it will immediately be usable.

To check if a function is defined, typeof(myFunction) == "undefined" should do the trick.

Rexrainbow's solution is better than mine though, you should try it this way.
B
17
S
8
G
4
Posts: 473
Reputation: 6,191

Post » Wed Feb 26, 2014 7:40 am

So just to clarity, Request File with Ajax, On Request Complete, ExecJS('myscript.js')? I don't think I quite understand how to set up Ajax correctly with this. Could you be a little bit more explicit? I appreciate the help.
B
11
S
2
G
3
Posts: 283
Reputation: 1,968

Next

Return to How do I....?

Who is online

Users browsing this forum: hrisnz and 10 guests