Examples

Advanced websites made simple

Download mixhtml JS

Get element

Click on the button "Get element". A request will be sent to the server. The server will respond with a new element that will be displayed on top of the button.

Front-end 

<button
    id="btn"
    mix-get="/items"
>
</button>

id Unique identifier for the element

mix-get Make the element trigger a GET request.

Response from the server 

<template
    mix-target="#btn"
    mix-before
>
    <div >
        New item
    </div>
</template>

template Every response must have at least one template. Inside the template comes the HTML that will be used in the DOM.

mix-target One and only one CSS selector.

mix-before One and only one CSS selector. In this example, it will add the content of the template just above the element defined in mix-target

Replace element

Click on the button "Replace element". A request will be sent to the server. The server will respond with a new element that will replace the button.

Front-end 

<button
    id="btn"
    mix-get="/items"
>
    Replace element
</button>

id Unique identifier for the element

mix-get Make the button trigger a GET request to "/items"

Response from the server 

<template
    mix-target="#btn"
    mix-replace
>
    <div >
        New item
    </div>
</template>

template Every response must have at least one template. Inside the template comes the HTML that will be used in the DOM.

mix-target One and only one CSS selector.

mix-replace One and only one CSS selector. In this example, it will replace the button.

Appear and disappear

Click on the button "Make magic". A request will be sent to the server. The server will respond with a new element that will be shown above the button. A few seconds later, the element will disappear.

Front-end 

<button
    id="btn"
    mix-get="/items"
> 
    Make magic
</button>

id Unique identifier for the element

mix-get Make the element trigger a GET request.

Response from the server 

<template
    mix-target="#btn"
    mix-before
>
    <div mix-ttl="1000">
        I will disappear soon :)
    </div>
</template>

template Every response must have at least one template. Inside the template comes the HTML that will be used in the DOM.

mix-target One and only one CSS selector.

mix-before One and only one CSS selector. In this example, it will add the content of the template just above the element defined in mix-target

mix-ttl Time To Live (ttl). Defines how many milliseconds the element should exist in the browser. When the ttl expires, the element will be remove from the browser.

Create profile (validation)

Enter your name and click on the button "Create profile". A request will be sent to the server. The server will respond with a new element displaying data about the profile that was just created. The input field and the button will be removed. The data is not validated at the front nor the back end.

Front-end 

<form id="frm">
    <input 
        name="user_name" 
        type="text"
        mix-check="^.{2,20}$"    
    >
    <button 
        mix-post="/users" 
        mix-data="#frm">
        Create profile
    </button>
</form>

id Unique identifier for the element

mix-post Make the element trigger a POST request.

mix-data CSS selector defining the element that contains the data that will be passed to the server. mix-data must be used if the element uses mix-post or mix-put.

Response from the server 

<template 
    mix-target="#frm" 
    mix-replace
>
    <div>
        your profile is ready 
    </div>
</template>

mix-target One and only one CSS selector.

mix-replace Replaces the element defined in mix-target with the data inside the <template>

Is email available ?

Enter your email. The email will be sent to the server. If you leave the input field empty, the server will respond with an error message. If your email is a@a.com, the server will respond with a message letting you know that the email is not available, otherwise, the server will respond with an "available" message.

Checking the status of the email will occur on the "blur" event.

Front-end 

<form id="frm">
    <input 
        name="email"
        mix-post="/check-email"
        mix-data="#frm"
        mix-blur
    >
    <div id="message"></div>
</form>

id Unique identifier for the element

mix-post Make the element trigger a POST request.

mix-data CSS selector defining the element that contains the data that will be passed to the server. mix-data must be used if the element uses mix-post or mix-put.

mix-blur Creates a JavaScript event "onblur". This will be triggered when the cursor leaves the field.

Response from the server

The server will have to validate and check the email. The response does not include any positioning tag, therefore it will replace what is inside the #message element. The global response looks like this: 

<template 
    mix-target="#message"
>
    <div>
        email status here
    </div>
</template>

mix-target One and only one CSS selector.

Show loading ...

Click on the button "Get item". The caption will change and it can not be clicked again, until the response is done.

Checking the status of the email will occur on the "blur" event.

Front-end 

<button 
    id="loading" 
    class="mix-hidden"
>
    Loading ...
</button>
<button 
    mix-get="/items" 
    mix-wait="#loading"
>
    Get item
</button>

id Unique identifier for the element

mix-hidden A CSS class defined in the style sheet. We recommen that you set it to "display: none"

mix-get Make the element trigger a GET request.

mix-wait A CSS selector pointing to the element that is hidden using the class mix-hidden. It will remove the class mix-hidden while the response is awaited. As soon as the response arrives, the mix-hidden class will be added to the element.

Response from the server 

<template 
    mix-target="#loading"
    mix-before
>
    <div>
        A few seconds of waiting. I am here 
    </div>
</template>

mix-target One and only one CSS selector.

mix-before One and only one CSS selector. In this example, it will add the content of the template just above the element defined in mix-target

Disable button

Click on the button "Get element". A request will be sent to the server. While the request is being processed, the button will be disabled and the caption will change. Once the response is finished, the button will be enabled and the caption will change to the "default" one.

Front-end 

<button
    id="btn"
    mix-get="/items"
    mix-default="Get item"
    mix-await="Please wait"
>
    Get item
</button>

id Unique identifier for the element

mix-get Make the element trigger a GET request.

mix-default Caption shown on the button. This text is set once the ajax/fetch request has finished. Used together with mix-await.

mix-await Caption shown on the button while the ajax/fetch request is being processed. Used together with mix-default

Response from the server 

<template
    mix-target="#btn"
    mix-before
>
    <div >
        New item
    </div>
</template>

template Every response must have at least one template. Inside the template comes the HTML that will be used in the DOM.

mix-target One and only one CSS selector.

mix-before One and only one CSS selector. In this example, it will add the content of the template just above the element defined in mix-target

Delete element

Click on the "Delete" button on any item. The caption of the button will change, the item will be deleted, and a message confirming the deletion will appear.

Item 1
Item 2

Front-end 

<p id="message"></p>
<div id="item_1">
    Item 1
    <button 
        mix-delete="/items/1" 
        mix-await="Deleting...">
        Delete
    </button>
</div>
<div id="item_2">
    Item 2
    <button 
    mix-delete="/items/2" 
    mix-await="Deleting...">
        Delete
    </button>
</div>

id Unique identifier for the element

mix-delete Make the element trigger a DELETE request.

mix-await Caption shown on the button while the ajax/fetch request is being processed. Used together with mix-default

Response from the server. The item id must be retrieved with the back-end language. The "x" is the id of the item. 

<template
    mix-target="#item_x" 
    mix-replace
>
</template>
<template 
    mix-target="#message" 
    mix-top
>
    <p mix-ttl="2000">
        Item deleted
    </p>
</template>

template Every response must have at least one template. Inside the template comes the HTML that will be used in the DOM.

mix-target One and only one CSS selector.

mix-replace Replaces the element defined in mix-target with the data inside the <template>

mix-top One and only one CSS selector. It will add the content of the template at the top of the element. Just after it begins. This is the equivalent to "afterbegin"

mix-ttl Time To Live (ttl). Defines how many milliseconds the element should exist in the browser. When the ttl expires, the element will be remove from the browser.

Redirect

Click on the button "Redirect me". The server will respond back with the instruction to redirect the page to another one. This feature could be very usefull when a user logs-in. If the login is successful, then the page can redirect somewhere else.

Front-end 

<button 
    mix-get="/"
>
    Redirect me
</button>

mix-get Make the element trigger a GET request.

Response from the server 

<template mix-redirect="/">
</template>

mix-redirect Redirects the browser to a new location URL. If found, this will be the only instruction that will be run by mixhtml. All other mix- tags will be ignored.