Javascript doesn't work client-side

[damienbidaud6]

Hi,

I have a javascript file in my static ressources when I use it server-side or in local without open-component it work perfectly, but when I use the same component client-side the js is not executed and I don't have a error message in the console.

So my question is do they are limitation for the static ressources or a configuration issue who can block my js code the be executed client side?

thanks

[matteofigus]

Hi @damienbidaud6 - how does your package.json looks like? If you need static resources, you need to declare the folders in the component spec. Example: https://github.com/matteofigus/oc-components-examples/blob/master/static-image/package.json#L14

[damienbidaud6]

I have add the folder in the static field like you can see:

{ "name": "widget", "description": "", "version": "1.0.0", "repository": "", "oc": { "files": { "data": "server.js", "template": { "src": "template.html", "type": "handlebars" }, "static":["js"] } } }

[matteofigus]

Uhm ok that seems ok. Other thing to check, in your component are you using the staticPath parameter to build the url? Here is a step to use a static resource step by step: https://github.com/opentable/oc/wiki/Advanced-operations#add-image-in-the-view-template

If all seems still good to you, are you able in case to share the code?

[damienbidaud6]

I think have the same thing

here my server.js

'use strict'; module.exports.data = function(context, callback){ callback(null, { path:context.staticPath, init: { to: context.params.to || 7015400, from: context.params.from || 8727100, depart: context.params.depart || '01/01/1900', return: context.params.return || '01/01/1901', point_of_sale: context.params.point_of_sale || "XXXXX" } }); };

and my template.html

<div id="magnet"></div><script src="{{path}}js/index.js" language="javascript" type="text/javascript"></script><script src="{{path}}js/app.js"></script>

[matteofigus]

@damienbidaud6 I can't reprodue. Created a test repo to see if I'm doing something different?
https://github.com/matteofigus/oc-issue-299

[damienbidaud6]

I have modified and push the index.js and the app.js for have a situation closer to what I have and when I try to select the input he is not found but when I use the same selector in the chrome commande line it select the input.

[matteofigus]

Ok, I think I now understand 👍

So, when you have 2 files like that and you do server-side rendering, execution is going to happen as soon as the files are downloaded, but the order is going to be guaranteed to be the right one.

When doing the client-side rendering, you may have a race condition for having file 2 downloaded and executed before file 1. To solve that, we usually follow one of those 3 approaches:

1. Simplest one, you bundle all the JS to be a single file
2. You use the built-in functionality for requiring CSS or JS files - like I did on this sample project
3. You use any other customised way for ensuring dependencies are loaded in the right order, for example using any other library like require.js or SystemJS, or just emitting/subscribing to some events so that you get the orchestration right between the pieces.

In my experience, 1) is good for doing something simple, but when you start having multiple components in the page something like 2-3) is required.

Hopefully this clarifies 👍

[damienbidaud6]

I try the 3 approaches and I have still a issue client-side with the js I have the beginning of the page who use the js correctly but the end doesn't use the js for example server-side I have this element who work perfectly

but client-side I have no interaction with the js

I look to the network tool and with something like 2-3 the js is loaded in the correct order but I have no interaction with the second half of the component when I use it client-side>

I hope it was clear

[matteofigus]

I still can't reproduce. Just to double check, you tried the latest version I pushed here?
https://github.com/matteofigus/oc-issue-299

In case you did, are you able to upload there the real version of the app.js?
I can make that repo private if you want - just want to get something I can reproduce so somebody here like me or @mattiaerre can help you ;)

[damienbidaud6]

I have a issus on oc-issues-299 when I try to load the page on chrome I have a error

my version of node is 4.6.0 and my version of npm is 2.15.9

[matteofigus]

have you done an npm install and then a npm start next? I setup the npm start in such way it runs in parallel the oc dev in the port 3030 and an http server on port 3000

[damienbidaud6]

yes and I have check if something was using the port 3000

[damienbidaud6]

It's ok I try with sudo and it's work