JS loading troubles in widgets

[tigger]

I can't quite wrap my head around this. I am trying to insert (client-side) js into widgets and having little success.

I have a demo html outside of nodebb which works without issues. javascript in body, loads two .js files with <script src=".."></script>, then defines some functions for some dynamic behavior depending on clicked checkboxes.

I try to insert it into nodebb widget. Since I did not include anything in the head, I assume I can just copy-paste the code into a html widget. Sadly, that does not seem to work. Objects that are defined in the loaded files do not exist. Am I doing something wrong? Or is the JS simply processed on the server side instead of client side? Thanks!

[yariplus]

Hello,

This should be possible. Can you post the code from one of your html widgets so we have a better idea of what's happening?

[tigger]

This is a minimal example:

<script src="static/comparisons/Chart.min.js"></script>
<script>
// Set chart dataset defaults.
Chart.defaults.global.elements.line.fill = false;
</script>

Yields: "ReferenceError: Chart is not defined"

(This is including the chartjs javascript, only self-served since I had issues with linking outside stuff before.)

[yariplus]

@tigger You'll need to use require, when Chart.js sees that require is available, it will define a module rather then creating the global Chart.

<script>
require(['/static/comparisons/Chart.min.js'], function (Chart) {
  // Set chart dataset defaults.
  Chart.defaults.global.elements.line.fill = false;
});
</script>

You need to use the require method in all widgets that use Chart. Chart will always refer to the same object, just like if it was a global.

You can also use urls, it will work the same.

require(['https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'], function (Chart) { ... });

[tigger]

Thanks! That require statement defines a nameless function which essentially outlines a scope? What if I create something in that scope and want to access it elsewhere? (As you can clearly tell, I have no javascript experience.)

[yariplus]

Yes, exactly. It keeps everything in it's own scope, and out of the global scope.

It depends what you are trying to do. Can you give an example?

[tigger]

I managed to get it to work, thanks (once I realized that I have to reorder calls so that the scoping is not a problem)!

[pichalite]

@tigger FYI... Chart.js is already available as a r.js module in NodeBB. So, you don't have to load it again from somewhere else.

Just use...

<script>
require(['Chart'], function (Chart) {
  // Set chart dataset defaults.
  Chart.defaults.global.elements.line.fill = false;
});
</script>

[tigger]

@pichalite said in JS loading troubles in widgets:

@tigger FYI... Chart.js is already available as a r.js module in NodeBB. So, you don't have to load it again from somewhere else.

Just use...

<script>
require(['Chart'], function (Chart) {
  // Set chart dataset defaults.
  Chart.defaults.global.elements.line.fill = false;
});
</script>

Cool, thanks!

[tigger]

I'm having somewhat strange trouble with it - I created 2 fake categories which are static content, I added them from a widget on the category page. One of them links to the webpage with this chart script. Strangely though, if I click back on the category link after having been on the static page with the script (the other one works fine), all my normal category links get rewritten as: /%7Bconfig.relative_path%7D/category/3/open-forum instead of just /category/3/open-forum. Would you have a clue what I broke and how?

[tigger]

Ah, nvm. I declared an object called config, which conflicted with something from nodebb.