Edit this page

up.script up:assets:changed
DOM event

This event is emitted when frontend code changes while the application is running.

There is no default behavior when assets have changed. In particular no asset elements from the response are updated in the current page. Even listeners may handle changed frontend code, e.g. by notifying the user or loading new assets.

When a server response has no <head>, this event is never emitted.

The event is emitted on the document.


The code below inserts a clickable <div id="new-version"> banner when assets change. The user can then choose to reload at their convenience, by clicking on the notification.

up.on('up:assets:changed', function() {
  // If we are already showing a notification, do nothing.
  if (document.querySelector('#new-version')) return
  // Append a <div id="new-version"> notification to the <body>
  up.element.affix(document.body, 'button#new-version', {
    text: 'A new app version is available. Click to reload.',
    onclick: 'location.reload()',

For more examples see Handling asset changes.

Emission time

The event is emitted at a particular time in the render lifecycle:

  • after new content has been loaded from the server
  • before any fragments have been changed on the page.
  • before the browser history was changed. A future history location may be found in event.renderOptions.location.

If you cannot allow the rendering to proceed with changed assets, listeners may abort the render pass by calling event.preventDefault().

Event properties

event.newAssets List<Element>

A list of all assets in the new content.

The list also includes asset that have a matching element on the current page.

By default no new asset are inserted into the current page. Event listeners must explicitly load new assets.

event.oldAssets List<Element>

A list of assets in the <head> of the current page.

event.renderOptions Object

The render options for the current render pass.

event.preventDefault() experimental

Aborts this render pass before new content is inserted.