ts-req

ts-req will issue an XHR request to a server and then update a fragment of a page with a response returned.

There is one limitation - TwinSpark expects you to return a single element for replacement. If you return more, they will be ignored - you can make use of this with help of ts-swap-push.

Terminology

• Element with a ts-req attribute is called origin element.
• Element coming from the server is called reply.
• Element which is going to be replaced/augmented with reply is called target element.

Notes

• Method by default is POST when placed on a form and GET in other cases.
• ts-req-method to override request method.
• ts-target to change target element.
• ts-req-selector to select part of the response.
• ts-swap to choose replace strategy.
• ts-req-strategy to deal with multiple requests from a single location.
• ts-req-history to change URL after request.
• ts-data to append data to a request.
• ts-json to append data as a JSON string.
• ts-req-batch to combine multiple requests into a single one.

Examples

Fragment Updating #

Explanation: a issues a request to a server on click, and then is replaced with a new link from a response.

Triggering Requests #

Usually requests are triggered on natural interrupts: submit on forms and clicks elsewhere, but sometimes you want more, like triggering on being seen or hovered:

Indicator #

It's really irritating when you click a link and nothing happens for some time. Luckily TwinSpark makes it really easy: it adds attribute aria-busy="true" to an origin element.

<script> in response (advanced)#

Setting innerHTML to a value which contains script element does not execute JavaScript inside that element. TwinSpark handles that for you, check it out.