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.
- Element with a
ts-reqattribute 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.
- Method by default is
POSTwhen placed on a form and
GETin 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-req-batch to combine multiple requests into a single one.
Fragment Updating #
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:
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)#
innerHTML to a value which contains
that for you, check it out.