{live}
A region of the page that re-renders on the server when something in it is clicked, submitted or changed, and swaps itself in.
Syntax
{live 'name'} ... <button pad-click="event" pad-value="value">...</button> ... {/live}
{live 'name'} ... <form pad-submit="event">...</form> ... {/live}
{live 'name'} ... <select name="field" pad-change="event">...</select> ... {/live}Parameters
-
name -
The region's name - letters, digits,
_and-. Give each region of a page its own name: an event is answered by the first region of that name.
Description
{live 'name'}...{/live} makes a part of the page interactive without JavaScript of the application's own. The content is wrapped in <div data-pad-live="name">, and the first region of the page brings a small inline script. Inside the region three attributes raise an event:
-
pad-click="event"on any element - a click; -
pad-submit="event"on a form - its fields come along as request values; -
pad-change="event"on a field - its name and value come along.
pad-value="..." gives the event a value.
An event posts padLive, padEvent and padValue to the page's own URL. The page runs as it always does - its PHP reads padLiveEvent() and padLiveValue() and changes its data - and the answer is the inner content of that one region, which the script swaps in. Nothing else of the page is sent.
State lives where a page keeps it: the session (names listed in $padSessionVars), a database, or the value the event carries, as the counter example does with pad-value. With $padCsrf on, the region carries the session's token in data-pad-csrf and the script sends it with every event.
Under the strict check a {live} without a name or without its closing tag is an error, and so is an event posted for a region the page does not render. For a part that is only loaded later, not re-rendered, see {ajax}; htmx and similar libraries get the same partial answers through {fragment}.
Examples
A counter
A click posts the event to the page; only the region is rendered again and swapped in.
{live 'liveCounter'}
<p>Clicked {$clicks} times</p>
<button pad-click="add" pad-value="{$clicks}">Add one</button>
<button pad-click="reset">Reset</button>
{/live}<?php
$clicks = (int) padLiveValue ();
if ( padLiveEvent () == 'add' ) $clicks++;
if ( padLiveEvent () == 'reset' ) $clicks = 0;
?>Clicked 0 times
A form in a region
pad-submit posts the form's fields with the event; the answer replaces the region.
{live 'liveGreet'}
<form pad-submit="greet">
<label>Name <input name="visitor" value="{$visitor}"></label>
<button>Greet</button>
</form>
{if $visitor ne ''}<p>Hello, {$visitor}!</p>{/if}
{/live}<?php
$visitor = padLiveEvent () == 'greet' ? trim ( (string) padRequest ( 'visitor', '' ) ) : '';
?>See also
- {ajax} Writes an empty div and a script that has the browser fetch another page into it after the page has loaded.
- {fragment} A named part of the page that a request can ask for alone - for htmx and ajax swaps.
- {form} A form that posts back to the page, carrying the session's CSRF token and its own name, its fields refilling when it came back.
- {page} Renders another page of the application - its PHP and its template - in place of the tag.