up.fragment :origin

HTML selector

Your target selectors may use this pseudo-selector to reference the origin element that triggered the change.

The :origin placeholder will be replaced with a target derived from the origin element.

Resolving ambiguous selectors

Example

Below we see two links that will each update the <div> next to them. This requires a rather verbose [up-target] attribute:

<a href="/tasks/1" up-target="a[href='/tasks/1'] + div">Show task 1</a> <!-- mark: a[href='/tasks/1'] + div -->
<div>Task 1 will appear here</div

<a href="/tasks/2" up-target="a[href='/tasks/2'] + div">Show task 2</a> <!-- mark: a[href='/tasks/2'] + div -->
<div>Task 2 will appear here</div

We can simplify the [up-target] by referencing the followed link by :origin:

<a href="/tasks/1" up-target=":origin + div">Show task 1</a> <!-- mark: :origin + div -->
<div>Task 1 will appear here</div

<a href="/tasks/2" up-target=":origin + div">Show task 2</a> <!-- mark: :origin + div -->
<div>Task 2 will appear here</div

When a link is clicked, :origin with a target derived from the link element. For example, clicking on the second link will target a[href='/tasks/2'].

Default origins

The origin element is automatically set for many actions, for example:

Setting the origin programmatically

When updating fragments programmatically through functions like up.render() you may pass an origin element as an { origin } option:

element.addEventListener('click', function(event) {
  up.render('.preview', { origin: element })
})

You do not need to pass an { origin } for functions that already have a natural origin:

up.follow(link) // link will be set as { origin }

Tip

Ensuring an origin is set may improve the precision of fragment lookup, even if a target selector doesn't contain an :origin reference. In the example above, Unpoly would prefer to match .preview in the region of the origin. If no origin is known, Unpoly will always match the first .preview in the current layer.