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.
Example
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
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.
The render options for the current render pass.
Aborts this render pass before new content is inserted.