UPDATE

Update existing items

In this example, there are multiple items in the DOM with the class "item". Clicking on the "Update items" button, will send a reques to the server. The response will contain the instruction to update those items. Updating changes the internal data in the elements, not the element itself. In short, the update alters the innerHTML of the targeted element(s)

Note: The request send to the server doesn't influence this example. It can be any type of request. In this example, it is using a GET reques to an imaginary end-point called "test"

    <button mix-get="test">
        Update items
    </button>

<browser mix-update=".item">
    <p>New item</p>
</browser>

Update existing items slowly

In this example, there are multiple items in the DOM with the class "item". Clicking on the "Update items" button, will send a reques to the server. The response will contain the instruction to update those items. Updating changes the internal data in the elements, not the element itself. In short, the update alters the innerHTML of the targeted element(s)

Note: The request send to the server doesn't influence this example. It can be any type of request. In this example, it is using a GET reques to an imaginary end-point called "test". The attribute mix-fade-2000 is used in the response, therefore the items are replaced slowly.

    <button mix-get="test">
        Update items
    </button>

<browser mix-replace=".item">
    <p mix-fade-2000>New item</p>
</browser>

Update value in an input field

Change the value of an input field and click outside the element (onblur). The other input fields will be updated.

    <button mix-get="test">
        Update items
    </button>

<browser mix-replace=".item">
    <p mix-fade-2000>New item</p>
</browser>