Examples

mix-replace

mix-replace

mix-update

mix-update

mix-remove

mix-remove

Response

mix-remove

mix-remove

Response

mix-cover

mix-cover

mix-get

mix-get + mix-before + mix-ttl

Response

mix-get

Click on the hiperlink. The mix-cover will appear while the fetch request is being executed. Then, the mix-cover will be hidden and the response will be placed above the link.

Response

mix-post + mix-await

Submit a form with the data in it. Enter your name and press the button. The name will be sent to the server. The server will reply with a message. While all that is taking place, the button will not be clickable (disabled). Once the response is received, the button will be clickable again.

Note: This example uses the action attribute in the form.

Request

<form action="/users"
    mix-post>
    <input name="user-name"
    placeholder="user name">
    <button id="btn">
        Create profile
    </button>
</form>

Response

<template 
    mix-replace="#btn">
    <div>
        Your profile is created
    </div>
</template>

mix-post

Submit a form with the data in it. Enter your name and press the button. The name will be sent to the server. The server will reply with a template that will instruct the UI to change the button with the content inside the template.

Note: This example does not use the action attribute in the form.

Request

<form
    mix-post="/users">
    <input name="user-name" 
    placeholder="user name">
    <button id="btn">
        Create profile
    </button>
</form>

Response

<template
    mix-replace="#btn">
    <div>
        Your profile is created
    </div>
</template>

mix-post

Only send the data inside one input element. There are situations in which the whole form should not be sent, but only one element. Think of an email that needs to be verified to make sure that it can be used to signup. If the email is invalid or taken, a message should be shown to the user. This action be be triggered onblur by using a combination of mix-post and mix-blur. This will validate the email once the user clicks outside the input field. Keep in mind, only that field is passed to the server and not the entire form.

Request

<form
    mix-post="/verify-email">
    <input name="email">
    <span id="message"></span>
</form>

Response

<template
    mix-replace="#message">
    Your profile is created
</template>

mix-get + mix-before

Click on the hyper link and a new element shows on before it. The new element is also clickable :)

Request

<a href="item"
    id="item"
    mix-get>
    Click here.
    A new element shows on top
</a>

Response

<div
    mix-before="#item"
    mix-get="item">
        This element came from the server.
        Click me again!
</div>

mix-get + mix-before

Click on the hyper link that doesn't have a href and a new element shows on before it.

Request

<a id="item"
    mix-get="item">
    Click here.
    A new element shows on top
</a>

Response

<div 
    mix-before="#item">
    New element from the server
</div>

mix-put

Submit a form with the data in it. Since PUT is used to update a resource, the id of the resource is usually part of the URL.

Note: This example uses the action attribute in the form.

Request

<form
    action="/users/1"
    mix-put>
    <input name="user-name"
    placeholder="user name">
    <button>
        Update profile
    </button>
    <div id="message"></div>
</form>

Response

<template
    mix-update="#message">
    <div mix-ttl="2000" mix-fade-out>
        Profile updated
    </div>
</template>

mix-replace

Replace an element in the DOM with a whole new element

Request

<div 
    id="ex-replace-03">
    I am going to be replaced
    with a new element when you click
    on the button bellow.
</div>
<button
    mix-post="ex-replace-03">
    Replace element on top
</button>

Response

<template
    mix-replace="#ex-replace-03">
    <div>
        I am the new element
    </div>
</template>

mix-replace

Replace multiple elements with a new one

Request

<div
class="ex-replace-02">
    I am going to be replaced
</div>
<div class="ex-replace-02">
    I am going to be replaced
</div>
<div class="ex-replace-02">
    And I too, will be replaced
</div>
<button mix-post="ex-replace-02">
    Replace all elements
</button>

Response

<template
mix-replace=".ex-replace-02">
    <div>
        I am the new element
    </div>
</template>

mix-update + mix-get

Update an element in the DOM. The element doesn't change, but the content of it (innerHTML) is updated.

Request

Response

mix-update + mix-get

Update multiple elements with a new one

Request

Response

mix-update + mix-get + mix-ttl

Update an element with a new one. The new element will be removed after a few seconds because mix-ttl is used.

Request

Response

mix-update + mix-get + mix-ttl

Update multiple elements with new ones. The new elements will be removed after a few seconds because mix-ttl is used.

Request

Response

mix-before + mix-get

Create a new element in the DOM before the selected one(s). It is possible to select any element by tag, id, class, or anything that is supported in query selectors.

Request

Response

mix-update + mix-get

Update multiple elements with a new one

Request

Response

mix-update + mix-get + mix-ttl

Update an element with a new one. The new element will be removed after a few seconds because mix-ttl is used.

Request

Response

mix-update + mix-get + mix-ttl

Update multiple elements with new ones. The new elements will be removed after a few seconds because mix-ttl is used.

Request

Response

mix-function

A DOM element sends a HTTP request. The response would like to trigger a function in the client (JavaScript function). The function is a custom one that expects to get 1 argument. The argument is the data contained inside the template tag.

JavaScript

<script>
    function show_data(data){
        alert(data)
    }
</script>

Request

<button
    mix-get="/data">
    Get JSON data
</button>

Response

<template
    mix-function="show_data">
    [{'id':1,'name':'A'}]
</template>