How to add javascript in a page

[serger]

Matrix Version:

Hi,

I’m not sure where to start with this, if someone could give me a pointer that would be great.

How do you work with the JS API within squiz matrix?

• I created a JS API asset, how do I access it? (eg: which URL endpoint do I send the Ajax requests to? Can I have an example?)

http://<hostname>/?a=999999

• Where do I source the JS API library from? I assume I need some URL to load that into the page before using it to instantiate the objects. Or is it loaded automagically?

Documentation https://matrix.squiz.net/manuals/web-services/examples/basic-javascript-api-implementation says:

<script type="text/javascript" src="http://SYSTEM_ROOT_URL/_web_services/javascript-api.js">

but of course those keywords (if they are keywords at all) aren’t being substituted.

So far what I have within a container looks like this:

<script type="text/javascript" src="/_web_services/javascript-api.js"></script>
<script type="text/javascript" src="/?a=354779"></script>
<script>
    var options = new Array();
    options['key'] = '8972111019';
    var js_api = new Squiz_Matrix_API(options);
</script>

Loading the JS File asset works, but javascript-api.js fails … and well I can’t test the JS API asset.

Thanks

[Bart]

You need to make sure the JS API asset is created somewhere where it receives a browserable URL. It’s basically a JavaScript file that you would request like any other JS files.

So if your JS API asset has a URL on it (check its web path screen), you should be able to just do:

<script src="./?a=1234">
</script>
<script>
var options = new Array();
options['key'] = '4767689380';
var js_api = new Squiz_Matrix_API(options);
<script>

Where 1234 is the asset ID of your JS API asset.

[serger]

That works thanks.

I’ve named my JS File asset “hello.js”, is there a way to refer to it by its name for the sake of code readability?

[Bart]

You can reference it by it’s relative URL I guess, but that will break if you ever move it to a different location.

The best practice is to just put the name of the file as a html comment afterwards so it’s easy to identify straight away which file it is.

<script src="./?a=1234"> <!-- hello.js -->

[serger]

Yep, just hard to track in the network tracing tool.

Thanks for the feedback anyway.

[Bart]

The network tracing tool on the front-end should track it by the full file name, as the ./?a= will get replaced with an absolute URL. So just make sure you name the file asset hello.js as well and you should be able to track it easily on the front-end.

[serger]

File named hello.js, I’m not seeing any substitution here …

[Bart]

Does the file have a URL on its web paths screen?

[PeterM]

Hi
Try adding the period at the the start of the link path - eg:
src="./?a=354772"
Thanks
Peter

[Bart]

Oh yea, off course, didn’t see that that was missing. THat would be it.

[serger]

Doesn’t work.

I’d be surprised the regex in charge of substitution would care about dot or no dots. Can someone escalate this question to a squiz developer?

[serger]

No URL on web paths. I’m not sure how that works, I’m new to the squiz matrix thing. How do I set a webpath to an asset?

[serger]

I’m testing a listing of asset but getting "<anonymous>" as a response instead of some JSON data. Any idea?

[PeterM]

Hi
Matrix will replace urls in the format:
src="./?a=354772"
With a webpath (as set in the webpaths section of the asset) or a /__data url for files if ‘Allow Unrestricted Access’ is set to Yes.
Alternatively you could also try using a keyword to set the URL:
src="%globals_asset_url:354772%"

Also try adding a root node(s) for your JS API asset. The assets you want to do stuff with should be under one of these.

Thanks
Peter