Simple call to functions from "onclick" in render notes

[diyoyo]

Hi,
I'm a bit confused with the way scripts are loaded in renderNotes.
(First of all, I know some solutions could just be a complete widget development, but that'll be for later).
Let's say I have a simple function calling "alert(msg)" in the JS lying below the HTML of the rendernote:

function alertWrap(msg){
     alert(msg);
}

How can I call it from a button or a link as simply as :

<a href="#" onclick="alertWrap('Hello World!')">Click Here</a>

?

Thanks.

Of course, I assume here the structure of the files is correct:

   -  RenderNote
          |_ render.html
                  |_  myscripts.js

[dosubot[bot]]

The short answer is that traditional onclick handlers in render note HTML won't work the way you'd expect, because the JavaScript in child notes is executed in an isolated IIFE (immediately invoked function expression) context — functions you define there aren't placed on the global window scope, so inline onclick="alertWrap(...)" can't find them.

Instead, the standard pattern in Trilium render notes is to bind event handlers from JavaScript using api.$container:

render.html:

<a href="#" class="my-alert-link">Click Here</a>

myscripts.js:

const $link = api.$container.find('.my-alert-link');
$link.on('click', (e) => {
    e.preventDefault();
    alert('Hello World!');
});

The key points:

1. Your JS child notes run inside a bundled context with access to api.$container — a jQuery-wrapped element containing your rendered HTML [1].
2. Use api.$container.find('.selector') to locate elements in your HTML and attach event listeners programmatically [[2]](https://github.com/TriliumNext/Trilium/blob/61efdf04834b97157f9b636f5815e5ee0e9b3bd4/apps/edit-docs/demo/root/Trilium Demo/Scripting examples/Statistics/Attribute count/template/js/renderTable.js#L2).
3. Child JS notes use the CommonJS module pattern (module.exports) if you want to expose reusable functions to a parent orchestrator script [[3]](https://github.com/TriliumNext/Trilium/blob/61efdf04834b97157f9b636f5815e5ee0e9b3bd4/apps/edit-docs/demo/root/Trilium Demo/Scripting examples/Statistics/Note type count/template/js/renderTable.js#L1-L21).

If you really want the inline onclick approach, you'd need to explicitly attach the function to window (e.g., window.alertWrap = function(msg) { alert(msg); }), but that pollutes the global scope and isn't the recommended Trilium pattern.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[Nriver]

I did it like this:

• add #customResourceProvider="js/1.js" to expose the js with http://trilium.com/custom/js/1.js
• use <script type="text/javascript" src="custom/js/1.js"></script> in the html

[diyoyo]

😱 🤯 Seriously?
Is this documented somewhere?

This is not exactly related to the original question, but I've been struggling with what your answer suggests, like, forever. for images, I had to perform a api.searchForNotes to load them via api/notes/download/noteId from their titles. As for scripts, I was running the same kind of search script, but I was doing it before hand, ie to generate the entire header ahead and hardcode the noteId thingy.

Let me go try your solution, slap myself and cry 🤣

[diyoyo]

@Nriver
doesn't work out of the box for me. Can you explain

• where is 1.js w/r to the render note tree mentioned in the original post, please?
• Also, where do you place the #customResourceProvider tag? is it on the renderer or the html note?
• is "custom" a locked keyword here, or is it part of your example ?

Thanks.

[eliandoran]

@diyoyo , documented in https://docs.triliumnotes.org/user-guide/advanced-usage/custom-resource-providers.

[diyoyo]

Olé, magnifico, thanks so much, that is completely changing the way I'm going to use Trilium 😃

[diyoyo]

@Nriver Thanks so much as well.

And to both of you, with @eliandoran , is it possible to use a renderNote as a custom resource itself ? like to embed it in a div of another renderNote ?

(I guess presentations probably work like this, no?)

[eliandoran]

@diyoyo , I haven't tried using a render note as a custom resource, no idea what will happen. I believe that the resource is served raw so you probably won't be able to integrate it, or only using an iframe.

What's your use case? A normal Preact component would be much easier if the goal is to reuse some code.

Also of note, custom resources are public, so make sure you're not exposing any sensitive information.

[eliandoran]

@diyoyo , you should also look into Preact JSX, you can define handlers much more easily and make use of bundles.