# 04. JavaScript

#### Colin Fay

#### 2026-07-07

## Using `{golem}` js functions

`{golem}` comes with a series of JavaScript functions that you can call from the server. These functions are added by default with `bundle_resources()` .

Then they are called with `golem::invoke_js("fonction", "ui_element")`.

This `ui_element` define the UI element to interact with. It can be a full jQuery selector, an id or a class. Note that you can add several elements and iterate other them.

`invoke_js` can be used with any function defined in a JavaScript Custom Handler, that you can build with `golem::add_js_handler()`.

### `golem::invoke_js()`

- `showid` & `hideid`, `showclass` & `hideclass` show and hide elements through their id or class.

    golem::invoke_js("showid", ns("plot"))

- `showhref` & `hidehref` hide and show a link by trying to match the `href` content.

    golem::invoke_js("showhref", "panel2")

- `clickon` click on the element. You have to use the full jQuery selector.

- `show` & `hide` show and hide elements, using the full jQuery selector.

- `disable` & `reable` able and disable specific element, using the full jQuery selector.

See `?golem::activate_js()` for the full list.

### A quick intro to jQuery selectors

- `#plop`: the element with the id `plop`

- `.pouet`: elements of class `pouet`

- `"button:contains('this')"`: buttons with a text containing `'this'`

Note that in html, tags contains attributes. For example:

    <a href = "https://thinkr.fr" data-value = "panel2">ThinkR</a>

contains `href` & `data-value`. You can refer to these attributes with `[]` after the tag name.

- `a[href = "https://thinkr.fr"]`: link with `href` being `https://thinkr.fr`

- `a[data-value="panel2"]`: link with `data-value` being `"panel2"`