Request
A request needs to be started or triggered. The request, as for this version of mixhtml, can be started on click, on focus, and on blur.
All other events,for example: hover, key press, key up, and so on, are most likely unecessary and rarely used and therefore
are not part of mixhtml.
mix-get
Create a GET request. The value points to an URL. If "href" is defined, the
URL will be the one defined in "href". The first example is the most
recommended one since it makes good use of Search Engine Optimization. Examples:
<a href="/items" mix-get>more</a>
<a mix-get="/items">more</a>
mix-post
Create a POST request. The value points to an URL. If "action" is defined, the
URL will be the one defined in "action". mix-post must be used together
with mix-data. Examples:
<form id="frm" action="/items" mix-post mix-data="#frm">
<form id="frm" mix-post="/items" mix-data="#frm">
mix-put
Create a PUT request. The value points to an URL. If "action" is defined, the
URL will be the one defined in "action". mix-put must be used together
with mix-data. Examples:
<form id="frm" action="/items" mix-put mix-data="#frm">
<form id="frm" mix-put="/items" mix-data="#frm">
mix-delete
Create a DELETE request. The value points to an URL. Examples:
<button mix-delete="/items/1">Delete</button>
mix-data
Selector defining the element that contains the data that will be sent to the server.
Usually a form. mix-data must be used together with mix-post or mix-put. Examples:
<form id="frm" action="/items" mix-post mix-data="#frm">
<form id="frm" mix-put="/items" mix-data="#frm">
mix-wait
Selector defining the element that will be shown while the request and response are being processed.
The shown element will be hidden as soon as mixhtml finishes handling the response.
<form id="frm" action="/items" mix-post mix-wait="#loader">
mix-focus
Sets an "onfocus" event on the element. This tag should be used in an input
or text field.
<input mix-post="/items" mix-focus>
mix-blur
Sets an "onblur" event on the element. This tag should be used in an input
or text field.
<input mix-post="/items" mix-blur>
mix-default
Caption shown on the button. This text is set once the ajax/fetch request
has finished. Used together with mix-await.
<button mix-default="Get item"></button>
mix-await
Caption shown on the button while the ajax/fetch request
is being processed. Used together with mix-default
<button mix-default="Get item"></button>
mix-check
Defines the rules that the element must past in order for the Ajax/Fetch
request to take place. The values is a regular expression.
<input mix-post="/items" mix-check="^.{2,20}$">
<template></template>
The response consists of two parts. A <template> and the DOM element/s inside it.
If one or multiple DOM elements are grouped, then 1 template can contain the instructions
to interact with those grouped elements. If the elements are not part of a group, for example
the header and the footer, then the response should contain 2 templates. On template to interact
with the header and 1 template to interact with the footer.
Note: If mix-replace, mix-before, mix-after, mix-top, or mix-bottom are not defined, then the default
action will be to replace the innerHTML of the target element.
<template>
Contains the instructions that will be understood by mixhtml in the browser.
A <template> has HTML tags to define the target element and the position.
<template></template>
mix-target
One CSS selector defining which element will be used to set the new data.
Can be any element that is defined in the DOM.
<template mix-target="#item"></template>
<template mix-target="[id='item']"></template>
mix-replace
The new DOM elements will replace the target element.
<template mix-target="#item" mix-replace></template>
mix-before
The new DOM elements will be positioned before the target element.
<template mix-target="#item" mix-before></template>
mix-after
The new DOM elements will be positioned after the target element.
<template mix-target="#item" mix-after></template>
mix-top
The new DOM elements will be positioned at the top/beginning the target element.
<template mix-target="#item" mix-top></template>
mix-bottom
The new DOM elements will be positioned at the bottom/ebd the target element.
<template mix-target="#item" mix-bottom></template>
mix-redirect
Instructs mixhtml to redirect the page to a new location. It doesn't interact
with any DOM element, therefore mix-target is not needed and it doesn't
need any internal DOM elements since they will be ignored.
<template mix-redirect="https://some-page"></template>
mix-function
mix-function
Set the name of the own defined function to be called. The data inside the <template>
will be passed to the function.
New DOM
Inside the <template> the new DOM elements should be defined. Any HTML element/s can
be part of it. The parent element can contain mixhtml tags to instruct to browser
to act on those tags.
Note: If mix-replace, mix-before, mix-after, mix-top, or mix-bottom are not defined, then the default
action will be to replace the innerHTML of the target element.
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.
<div mix-ttl="1000">Item</div>
mix-fade-out
If an element should fade out slowly from the DOM, this class must be added to it.
The speed and the time for the fade out can be set in the CSS.
<div mix-fade-out">Item</div>
Single Page App (SPA)
Building a Single Page App is quite complex, yet mixhtml makes it simple. A
few HTML tags need to be added to the DOM and with a little logic in the
back-end, then the website can be turned into a SPA. This website is actually
a SPA and it uses mixhtml to do it.
Note: If mix-replace, mix-before, mix-after, mix-top, or mix-bottom are not defined, then the default
action will be to replace the innerHTML of the target element.
mix-push-url
The URL that will be pushed to the history of the browser. This
will allow a user to move back and forward between pages. Combine
this tag with mix-on-url, so when the user moves between pages,
the mix-on-url will show and hide different elements.
<div id="index" mix-push-url="/">Item</div>
<div id="docs" mix-push-url="/docs">Docs</div>
mix-on-url
When a user moves between pages, the mix-on-url will work together
with mix-push-url. If both are a match, then mix-on-url will
start using the mix-hide and mix-show to hide and show different
elements in the SPA
<div mix-on-url="/" mix-hide="main" mix-show="#home">Home</div>
mix-title
Sets the title of the page in the tag <title>
mix-hide
CSS selector defining which element/s will be hidden in the DOM
<div mix-on-url="/" mix-hide="main">Home</div>
mix-show
CSS selector defining which element/s will be shown in the DOM
<div mix-on-url="/" mix-show="#main">Home</div>