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.
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:
Create a POST request. The value points to an URL. If "action" is defined, the URL will be the one defined in "action". Since a POST request must use a form, the mix-post attribute is defined in the form tag. Examples:
Create a PUT request. The value points to an URL. If "action" is defined, the URL will be the one defined in "action". Since a PUT request must use a form, the mix-put attribute is defined in the form tag. Examples:
Create a PATCH request. The value points to an URL. If "action" is defined, the URL will be the one defined in "action". Since a PATCH request must use a form, the mix-patch attribute is defined in the form tag. Examples:
Create a DELETE request. The value points to an URL. Examples:
Sets an "onfocus" event on the element. This tag should be used in an input or text field. When the element is "focused", then the request will be sent.
Sets an "onblur" event on the element. This tag should be used in an input or text field. When the element is "blured", then the request will be sent.
Caption shown on the button. This text is set once the ajax/fetch request has finished. Used together with mix-await.
Element that is shown while the fetch request is executed. The element will be hidden once the response is received. Add the class mix-hidden to the element.
Caption shown on the button while the ajax/fetch request is being processed. Used together with mix-default.
Defines the rules that the element must past in order for the ajax/fetch request to take place. The values is a regular expression.
The server must respond with one or many DOM elements. Each element is an instruction that the client will follow.
The response must contain one main tag. This can be any HTML tag as a div, p, etc. You can also set the main tag to be your own. We recommend to use the mixhtml tag to make it clear that the response will be handle by the library.
Only one attribute per tag is allowed. These are the attributes that can be set in a tag in the response:
Removes the selected element(s) from the DOM. The attribute mix-remove can be set in any tag in the response. The tag itself will not be shown anywhere in the front-end.
Replaces the selected element(s) with the new elements or data. The attribute mix-replace can be set in any tag in the response. The tag itself will not be shown anywhere in the front-end.
Updates the inner HTML of an element with the new element(s) or data. In the following example the element with id #user will be updated with the div containing "New element".
Targets one or multiple elements (depending on the selector) in the front-end. Then, it places the element from the response before the targeted element.
Targets one or multiple elements (depending on the selector) in the front-end. Then, it places the element from the response just after the beginning of the targeted element.
Targets one or multiple elements (depending on the selector) in the front-end. Then, it places the element from the response just before the end of the targeted element.
Targets one or multiple elements (depending on the selector) in the front-end. Then, it places the element from the response after the end of the targeted element.
Calls a function in javascript. The content inside the tag in the response will be passed to the function as an argument. In the following example, the function test will be invoked. The data inside the tag will be passed to the function as the argument. This means, that the test function could be defined like: function test(data){...}
Redirects the browser to a new location. The location must be a valid URL.
The response contains one main tag with one attribute. Inside this tag, many DOM elements can be placed. These elements, if needed, can contain the following attributes.
A time to live ttl can be set on that element. This means, that the element will be removed from the DOM once the ttl is reached. The ttl is in milliseconds. In the following example the div will be removed from the DOM after 2 seconds.
Makes the element slowly fade out from the screen. The time set in mix-ttl will be used to fade the element away.
Note: This CSS animation uses keyframes