# 09. __Data Importing__

[![+Professional Support](https://www.totaljs.com/img/badge-support.svg)](https://www.totaljs.com/support/) [![+Chat with contributors](https://www.totaljs.com/img/badge-chat.svg)](https://messenger.totaljs.com)

`+v17` Data-Importing is a special feature in jComponent. It can download content/components dynamically and directly into the specific DOM element.

### Usage

```html
<div data-import="url:/mysubpage.html;cache:10 minutes"></div>
```

### All supported commands

- [command: `url`](#command-url-value-)
- [command: `init`](#command-init-path-to-method-)
- [command: `make`](#command-make-path-to-method-)
- [command: `cache`](#command-cache-value-)
- [command: `class`](#command-class-value-)
- [command: `path`](#command-path-value-)
- [command: `reevaluate`](#command-reevaluate-true-)
- [command: `replace`](#command-replace-true-)
- [command: `target`](#command-target-selector-)

---

### Command: `url:value`

__IMPORTANT__ Must contain a relative or absolute URL address. The content will be downloaded automatically and importend into the current element.

---

### Command: `init:path.to.method`

*Optional*. A method according to the value of `init` will be executed after the content will be imported.

---

### Command: `make:path.to.method`

*Optional*. A method according to the value of `make` will be executed before the content will be imported. The method __must return updated response__. If the method returns `empty` or `nullable` value then the content won't be imported and used.

```html
<div data-import="url:/someform.html;make:updatesomething"></div>

<script>
	function updatesomething(response, el, path) {
		// @response {String} a response
		// @el {jQuery} a current DOM element wrapped in jQuery
		// @path {String} a declared path

		// IMPORTANT:
		return response + '<div>MY ADDITIONAL CONTENT</div>';
	}
</script>
```

---

### Command: `cache:value`

*Optional*. Enables `localStorage` caching for future usage. It can contain: `1 day` or `10 minutes`.

---

### Command: `class:value`

*Optional*. Toggles a __class__ or __classes__ on the current element after the content will be imported.

---

### Command: `path:value`

*Optional.* A value of `path` will replace all `&#x7E;PATH&#x7E;` phrases in the response before the content will be evaluated. Example of usage:

__Declaration__:

```html
<div data-import="url:/someform.html;path:user.profile"></div>
```

__someform.html__:

```html
<div data---="input__&#x7E;PATH&#x7E;.name__required:true">Example</div>
```

__Output__:

```html
<div data---="input__user.profile.name__required:true">Example</div>
```

---

### Command: `reevaluate:true`

`+v18` *Optional*. Can re-evaluate again scripts and styles. By default are scripts/styles evaluated only one-time, this behaviour can evaluate them again. Default: `false`.

---

### Command: `replace:true`

*Optional*. Can replace a current element with a new content. Otherwise the content will appended. Default: `false`.

---

### Command: `target:selector`

*Optional*. Can import the content into the specific `target` and `selector` means jQuery selector.