j-Exec — Total.js
Tags: frontend, ui, totaljs, development
Published: 2024-07-09 14:17:06

j-Exec is part of the jComponent library from Total.js. You can find more information about j-Exec on [componentator.com](https://componentator.com/components/j-exec/) or [GitHub](https://github.com/totaljs/components/tree/master/j-Exec).

This component is singleton and works for the whole HTML document, where it is used. After adding a class _exec_, _exec2_, or _exec3_ to the element this component captures a click event (or double-click and right-click, depending on usage) and executes a method that you define.

## How to use j-Exec

As first step you have to know how to use jComponent library. I wrote about it in my previous blog, so for more information please read this [blog post](https://dev.to/palo/jcomponent-totaljs-1m26).

**Initialization**
It is very straightforward to use j-Exec in your applications and here I show you an example.

First of all, you have to initialize it in your code. A good practice is to initialize your singleton components on the top of your document (I have them as the first thing in my _body_ element). It is clear and easy to debug when you know where to look for your components.

```html
<ui-component name="exec"></ui-component>
```

After this, you can use j-Exec on every element you want as many times as you need.

**Usage**
To make j-Exec work it is important to add two things to your element. You have to add class exec to a particular element and attribute _data-exec_, which must contain the method you want to execute.

Example:

This example will include code with plugins, so if you want more information about them, please read my [previous blog](https://dev.to/palo/totaljs-ui-library-2c3n) or [documentation](https://docs.totaljs.com/components/40d03002xw50c/) (or the example on [componentator.com](https://componentator.com/components/j-exec/) is without plugins).

```html
<ui-plugin path="example">
  <div class="exec" data-exec="?/click">Click</div>
</ui-plugin>
```

After clicking on our element (in this case, the _div_ element with the text _Click_), the method _click_ from our PLUGIN will be executed.

```javascript
PLUGIN('example', function(exports) {
  exports.click = function(element, event) {
    console.log('Click');
  };
});
```

This is JavaScript PLUGIN with one method _click_. After executing this method word click will appear in our console. As you can see you can catch the_ element_ which was clicked and the _event_ which invoked this method.


![Example of j-Exec usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k4qbxu4kwhgcbz8uxsy.gif)

**Double-click and right-click**
If you want to capture double click or right click you can use the same code as in the example above with two little changes in HTML code. These changes would be **class and attribute**.

**Double-click**
```html
<ui-plugin path="example">
  <div class="exec2" data-exec2="?/click">Click</div>
</ui-plugin>
```

**Right-click**
```html
<ui-plugin path="example">
  <div class="exec3" data-exec3="?/click">Click</div>
</ui-plugin>
```

## Redirect
j-Exec can be also used directly for redirecting. After clicking on an element with class exec will be executed method _REDIRECT()_.

Example:

```html
<ui-plugin path="example">
  <div class="exec" data-href="home">Click</div>
</ui-plugin>
```

Clicking on our div element with the text _Click_ will execute method **REDIRECT('/home/')**. This method performs redirects to relative path **/home/**. If you want more information about this method, please read the [documentation](https://docs.totaljs.com/components/40d02001ra51c/#61b95001ob51c).


![Example of j-Exec usage with redirect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p78tq5gf8turuaajfy0c.gif)

**Double-click and right-click**
Double-click and right-click work the same as in the example with invoking our method. We have to change class and attribute.

**Double-click**
```html
<ui-plugin path="example">
  <div class="exec2" data-href2="home">Click</div>
</ui-plugin>
```

**Right-click**
```html
<ui-plugin path="example">
  <div class="exec3" data-href3="home">Click</div>
</ui-plugin>
```

## Video tutorial
{% youtube https://youtu.be/vzHyjl_mANg %}