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

[eliandoran]

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