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, even a custom one. We recommend to use the browser tag to make it clear that the response will be handle by the browser.
These are the attributes that can be set in a tag in the response:
Targets one or multiple elements depending on the selector. Then, it places the element(s) from the response before the beginning of the targeted element(s).
<browser mix-before-begin="#user">New</browser>
<browser mix-before-begin="#user"><div>New</div></browser>
Targets one or multiple elements depending on the selector. Then, it places the element(s) from the response after the beginning of targeted element(s).
<browser mix-after-begin="#user">New</browser>
<browser mix-after-begin="#user"><div>New</div></browser>
Targets one or multiple elements depending on the selector. Then, it places the element(s) from the response before the end of the targeted element(s).
<browser mix-before-end="#user">New</browser>
<browser mix-before-end="#user"><div>New</div></browser>
Targets one or multiple elements depending on the selector. Then, it places the element(s) from the response after the end of targeted element(s).
<browser mix-after-end="#user">New</browser>
<browser mix-after-end="#user"><div>New</div></browser>
Targets one or multiple elements depending on the selector. Then, it shows the element(s) in the DOM. If the attribute mix-fade-* is used, it will show the element(s) slowly.
<browser mix-show=".users"></browser>
<browser mix-show=".users" mix-fade-2000></browser>
Targets one or multiple elements depending on the selector. Then, it hides the element(s) in the DOM. If the attribute mix-fade-* is used, it will hide the element(s) slowly.
<browser mix-hide=".items"></browser>
<browser mix-hide=".items" mix-fade-2000></browser>
Targets one or multiple elements depending on the selector. Then, it removes the element(s) in the DOM. If the attribute mix-fade-* is used, it will remove the element(s) slowly.
<browser mix-remove=".items"></browser>
<browser mix-remove=".items" mix-fade-2000></browser>
Targets one or multiple elements depending on the selector. Then, it replaces the selected element(s) with the new element(s). If the attribute mix-fade-* is used in the inner element(s), it will replace the element(s) slowly.
<browser mix-replace=".items"><div>New</div></browser>
<browser mix-replace=".items"><div mix-fade-1000>New</div></browser>
Targets one or multiple elements depending on the selector. Then, it updates the inner html of the targeted element(s) with the new elements. If the attribute mix-fade-* is used, it will update the element(s) slowly.
<browser mix-update=".users"><div>New</div></browser>
<browser mix-update=".users" mix-fade-2000><div>New</div></browser>
Calls a function in Javascript. The content inside the tag will be passed to the function as an argument. This could be useful when triggering a function after the respose has arrived in the browser.
The function can take zero or one argument. If there is a need to pass multiple arguments, then pass an array or json structure that can later be parsed in the code.
In the following example, the function test will be run. 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){...}
<browser mix-function="test">[{"id":1,"name":"a"}]</browser>
Runs Javascript. The value inside the tag will be the script that will be executed.
In the following example, the function test will be called. The name John will be passsed to the function and it will be logged in the console.
<browser mix-script="test('John'); function test(name){console.log(name)}"></browser>
Redirects the browser to a new location. The location must be a valid URL.
<browser mix-redirect="https://mixhtml.com"></browser>