09. Data Importing

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

Usage

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

All supported commands

• command: url
• command: init
• command: make
• command: cache
• command: class
• command: path
• command: reevaluate
• command: replace
• command: target

---

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.

<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 ~PATH~ phrases in the response before the content will be evaluated. Example of usage:

Declaration:

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

someform.html:

<div data---="input__~PATH~.name__required:true">Example</div>

Output:

<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.