Some questions on writing front-end scripts

NodeBB Development
  • Hello everyone.
    I'm writing a plugin for NodeBB. and some questions arises.

    1. I see many plugins have client.js, the purpose of writing this script is to put a short script which will run as soon as this component is loaded. Is it the true purpose of this file?

    2. in client.js, we could see

    $(document).ready(function() {
    // Some code

    example from nodebb-plugin-markdown

    But we could see another version which does not use this wrap instead expose those statements in global scope.
    The question is, which version is better or is recommended?

    Thanks in advance!✈

  • @jiangcaiyang $(document).ready just tells jQuery to execute the code in the given function after the document HTML as finished loading. It may not be necessary if the things you're doing don't need the document to be ready.

  • @PitaJ How many times will // Some code be executed if they are not inside $(document).ready? I know // Some code will be executed once inside $(document).ready.

    Another question, which will be executed first? the code inside $(document).ready or the one outside?

Suggested Topics

  • 0 Votes
    2 Posts

    I'd create a require.js module and define it in the modules section of your plugin.json👍

    define('myplugin/utils', [], function () { var Module = {}; = function () { return 'bar'; } return Module; });

    Somewhere else...

    require(['myplugin/utils'], function (utils) { console.log(; // 'bar' });

    and in plugin.json:

    ... "modules": { "myplugin/utils.js": "relative/path/to/your/utils.js" } ...
  • 0 Votes
    6 Posts

    @riddle911 nice job. I may good at programming but I'm definitely not an expert in Excel. Nice work, and thanks for sharing.

  • 1 Votes
    18 Posts

    @yariplus said in Noob Plugin question: Alterin error message on filter hook.:

    Yep, you can use this function here the same way.

    Just declare it at the global scope so that your hook can see it.

    Thank you very much @yariplus ; I achieved what i needed thanks to your help.

    I was able to see my custom page with my custom messages like you pointed out.

    Then, because i only wanted to change the message displayed on the 403 error regarding the logic on my plugin i was able to change it to using another method; only if it could help anyone else, i just imported the helpers module and called the function notAllowed with my custom message:

    var helpers = require.main.require('./src/controllers/helpers'); // tagsTitle.topicBuild = function (data, callback) { if (data.templateData.privileges.errorMessage) { helpers.notAllowed(data.req,data.res, data.templateData.privileges.errorMessage); }else{ callback(null, data); } };

    Thanks again. I learned a lot of basic stuff just trying your suggestions.

    Kind regards.

  • 0 Votes
    1 Posts

    Greetings, I am trying to directly modify some files in the persona theme to include the slick carousel slider as a header. I've added it as an inline script in header.tpl and also changed my requirejs-config accordingly:

    require.config({ baseUrl: "{relative_path}/src/modules", waitSeconds: 3, urlArgs: "{config.cache-buster}", paths: { 'jquery': '../../vendor/jquery/js/jquery', 'forum': '../client', 'admin': '../admin', 'vendor': '../../vendor', 'mousetrap': '../../bower/mousetrap/mousetrap', 'slick': '' }, shim: { 'slick' : ['jquery'] } });

    I find that the slider and site is working fine only on a fresh page load/reload. On a click of any button to navigate, the slider breaks and i get these errors:

    Uncaught TypeError: $(...).timeago is not a function
    Uncaught TypeError: $(...).tooltip is not a function
    Uncaught TypeError: widgetAreas.find(...).timeago is not a function

    Probably suggesting that jQuery was loaded more than once. I'm inclined to think that this has got something to do with how I've changed the requirejs above. However leaving out the above change will lead to:

    Uncaught TypeError: Cannot read property 'fn' of undefined in slick.min.js

    Possibly suggesting the jQuery wasn't loaded?

    I've also looked and followed the tips here but nothing seems to work. I just feel that I'm really close to getting it done.

  • 3 Votes
    23 Posts

    @baris Please help
    nothing happened after save changes again at same screen.