# Is there another solution instead using $.getScript(..) for once add external client javascript in created node html file?

**URL:** <https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048>\
**Category:** Developing Nodes\
**Created:** [2 January 2023 08:19 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048 "2023-01-02T08:19:10Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![studiobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/studiobox/32/55766_2.png) [@studiobox](https://discourse.nodered.org/u/studiobox)\
**Post date:** [2 January 2023 08:19 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/1 "2023-01-02T08:19:10Z")

</div>

Hi,

At first, I have follow bellow topic for add external client javascript in created node html file.

[Include JS in a html custom module - General - Node-RED Forum (nodered.org)](https://discourse.nodered.org/t/include-js-in-a-html-custom-module/10434/4)

[Include JS in a html custom module - General - Node-RED Forum (nodered.org)](https://discourse.nodered.org/t/include-js-in-a-html-custom-module/10434/10)

I use RED.httpAdmin.get(...) in created node js file.

```auto
RED.httpAdmin.get('/node-line-notify/js/*', function(req, res){
        const parentPath = path.resolve(__dirname, '..');
        const options = {
            root: parentPath + '/static/',
            dotfiles: 'deny'
        };
    
        res.sendFile(req.params[0], options);
    
        // var filename = path.join(__dirname , 'static', req.params[0]);
        // res.sendfile(filename);
    });

```

And I use $.getScript(..) in created node html file at event 'oneditprepare' event, see below

```auto
oneditprepare: function () {
         .......
         $.getScript('node-line-notify/js/emoji-picker-new.js')
                .done(function (data, textStatus, jqxhr) {
                    console.log("load emoji script done");
                    initEmojiPicker({
                        trigger: [
                            {
                                selector: '.btnEmoji',
                                insertInto: '.node-input-message'
                            }
                        ],
                        closeButton: false,
                    }, setButtonState);
                })
                .fail(function (jqxhr, settings, exception) {
                    console.log("fail load emoji script");
                    console.log(exception);
                    console.log(exception.stack);
                });
        .........
}

```

The process for load external client javascript is able to work properly.

But I have some problem after that.

My script has load and create new instantiate javasript class object every time when 'oneditprepare', Then my class object has increase everytime.

Is there another solution instead using $.getScript(..) for once add external client javascript in created node html file?

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![ralphwetzel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ralphwetzel/32/53713_2.png) [@ralphwetzel](https://discourse.nodered.org/u/ralphwetzel)\
**Post date:** [2 January 2023 08:29 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/2 "2023-01-02T08:29:09Z")

</div>

Do you really need to load this on every onEditPrepare?  
Couldn't it be sufficient to load it once (on module level) and then create instances when necessary?

---

<div class="post-metadata">

**Author:** ![studiobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/studiobox/32/55766_2.png) [@studiobox](https://discourse.nodered.org/u/studiobox)\
**Post date:** [2 January 2023 10:31 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/3 "2023-01-02T10:31:45Z")

</div>

Actually, I want to load my external client javascript at only once time. And if my created node module can call, if it want to use.

My external client javascript is add emoji module.

 ![pic1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b690d247c4bdea14522de0ee6bb83508a221fbc.png)

Everytime 'oneditprepare' will do, it has load external client javascript and new instantiate my emoji module.

And then if I select emoji icon at once, number of selected emoji icon is inserted into textarea is equat to instance of external client javascript.

![pic2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/35773b130cf984ef0ad483c3087505b18cd0d2d2.png)

So, I want to find solution for load my external client javascript at only once time, and using them with my created node module.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [2 January 2023 12:58 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/4 "2023-01-02T12:58:52Z")

</div>

If I may chip in here.  
if your custom library is for the Editor, then you maybe over engineering this.

See my post here.

> [@Reading from constants.js file from HTML in custom node](https://discourse.nodered.org/t/reading-from-constants-js-file-from-html-in-custom-node/71247/2):
>
> Hi @ItsDaveTheWave In your nodes root folder node-red-contrib-cool-node, add a folder resources you can then call into this folder like so, in your HTML file \<script src="resources/node-red-contrib-cool-node/constants.js"\>\</script\> [Loading extra resources in the editor : Node-RED (nodered.org)](https://nodered.org/docs/creating-nodes/resources)

Just adding a `resources` folder to your node, will allow Node RED to use any file from this location, and your HTML file can call into this folder, and it will load only once.

just put a normal script file tag at the top of your HTML file and its loaded (and ready to use), whenever your node configuration is used.

the js file here will be loaded as the editor is loaded (not when your configuration is shown)  
i.e it loads once

```auto
<script src="resources/node-red-contrib-cool-node/emoji-picker-new.js"></script>

```

The `resources` folder should be used if your Node HTML requires it's own JS files (or any other resource for that mater, i.e images etc)

You should not need to use `RED.httpAdmin` to fetch your own resources, the ability is baked into Node RED for you.

> **[Loading extra resources in the editor : Node-RED](https://nodered.org/docs/creating-nodes/resources)**

---

<div class="post-metadata">

**Author:** ![studiobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/studiobox/32/55766_2.png) [@studiobox](https://discourse.nodered.org/u/studiobox)\
**Post date:** [2 January 2023 16:09 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/5 "2023-01-02T16:09:20Z")

</div>

Thank you very much. 😊

I follow your suggestion and [Loading extra resources in the editor : Node-RED](https://nodered.org/docs/creating-nodes/resources). It works correctly.

By add

```auto
<script src="resources/my-node-package/emoji-picker-new.js"></script>

```

and  
Call instantiate outside 'oneditprepare' below.

```auto
<script type="text/javascript">
    .....
    (() => {
        new EmojiPicker({
            ...........
            ...........
        }, setButtonState);
    })();

    RED.nodes.registerType('my-node-module', {
         .............
          oneditprepare: function () {
              ............
          }
    };
</script>

```

Thank you for you all helps 😊

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 January 2023 17:28 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/6 "2023-01-02T17:28:01Z")

</div>

> [@studiobox](#):
>
> `(() => {`

You might want to wrap that round your whole script rather than just the picker. Helps ensure that there can be no accidental interactions between your code and another node's in the Editor. I do that on all my nodes.

---

<div class="post-metadata">

**Author:** ![studiobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/studiobox/32/55766_2.png) [@studiobox](https://discourse.nodered.org/u/studiobox)\
**Post date:** [2 January 2023 20:46 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/7 "2023-01-02T20:46:21Z")

</div>

You mean, I should wrap all code inside

(() =\> {  
.........  
.........  
})();

right?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 January 2023 20:50 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/8 "2023-01-02T20:50:19Z")

</div>

Yup, that's right.

---

<div class="post-metadata">

**Author:** ![studiobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/studiobox/32/55766_2.png) [@studiobox](https://discourse.nodered.org/u/studiobox)\
**Post date:** [2 January 2023 20:51 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/9 "2023-01-02T20:51:43Z")

</div>

Thank you very much 😊

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 January 2023 20:51 UTC](https://discourse.nodered.org/t/is-there-another-solution-instead-using-getscript-for-once-add-external-client-javascript-in-created-node-html-file/73048/10 "2023-01-16T20:51:48Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.