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:

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.