JS loading troubles in widgets



  • 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!


  • Community Rep

    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?



  • 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.)


  • Community Rep

    @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) { ... });
    


  • 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.)


  • Community Rep

    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?



  • 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)!


  • Plugin & Theme Dev

    @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>
    


  • @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!



  • 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?



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


Log in to reply
 

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.