Follows this link via AJAX and replaces a CSS selector in the current page with corresponding elements from a new page fetched from the server:
<a href="/posts/5" up-target=".main">Read post</a>
You can update multiple fragments from a single request by separating separators with a comma (like in CSS). E.g. if opening a post should also update a bubble showing the number of unread posts, you might do this:
<a href="/posts/5" up-target=".main, .unread-count">Read post</a>
By default Unpoly will replace the given selector with the same
selector from a freshly fetched page. Instead of replacing you
can append the loaded content to the existing content by using the
:after pseudo selector. In the same fashion, you can use
to indicate that you would like the prepend the loaded content.
A practical example would be a paginated list of items. Below the list is
a button to load the next page. You can append to the existing list
:after in the
up-target selector like this:
<ul class="tasks"> <li>Wash car</li> <li>Purchase supplies</li> <li>Fix tent</li> </ul> <a href="/page/2" class="next-page" up-target=".tasks:after, .next-page"> Load more tasks </a>
You can also use
[up-target] to turn an arbitrary element into a link.
In this case, put the link's destination into the
<button up-target=".main" up-href="/foo/bar">Go</button>
Note that using any element other than
<a> will prevent users from
opening the destination in a new tab.
The CSS selector to replace
The HTTP method to use for the request.
The transition to use for morphing between the old and new elements.
The selector to replace if the server responds with a non-200 status code.
The transition to use for morphing between the old and new elements when the server responds with a non-200 status code.
The selector to update when the original target was not found in the page.
The destination URL to follow.
If omitted, the the link's
href attribute will be used.
A message that will be displayed in a cancelable confirmation dialog before the link is followed.
Whether to reveal the target element within its viewport before updating.
Whether to restore previously known scroll position of all viewports within the target selector.
Whether to force the use of a cached response (
or never use the cache (
or make an educated guess (default).
The name of the layer that ought to be updated. Valid values are
If set to
auto (default), Unpoly will try to find a match in the link's layer.
If no match was found in that layer,
Unpoly will search in other layers, starting from the topmost layer.
The name of the layer that ought to be updated if the server sends a non-200 status code.
Whether to push an entry to the browser history when following the link.
Set this to
'false' to prevent the URL bar from being updated.
Set this to a URL string to update the history with the given URL.