Ajax Playground

A login-free, database-free harness for exercising the Ajax framework - the test surface for DOM morphing becoming the default update mechanism, and for the wider Ajax cleanup. Every page below is reached by a clean route URL (see Routes).

Invoice editors

• Invoice, nice and simple - a customer picker, multi-select tags, drag-to-reorder lines, and a live preview, with one observe field driving the lot.
• Invoice, overly complex (for testing) - the same idea cranked up to use EVERY AjaxSlim element and far too many update containers (for stress testing), so any cross-element regression shows up as a visibly wrong total.

Reference

• AjaxSlim element reference - every element: what it does and its full bindings table. Rendered from the .apiext files (the extended API format).
• AjaxSlim guide - the bigger picture and migration notes (porting from the classic Ajax framework).
• .apiext format - the extended element-API format: what it adds over .api.

Server push

• Server-sent events - an EventSource on the app's /sse/clock route streams a clock tick a second to every subscriber (wo-adaptor-jetty-push). Direct-connect it tests the adaptor's streaming responses; through the front-end proxy it tests unbuffered pass-through.
• Datastar over SSE - a page driven entirely by Datastar: one long-lived feed the server pushes state through, and every button its own short SSE stream answering with element and signal patches. Shared state, so open it twice.
• WebSocket echo - opens a socket to the app's /ws/echo endpoint (wo-adaptor-jetty) and echoes what you type. Direct-connect it tests the adaptor's WebSocket support; through the front-end proxy it tests WebSocket tunneling.

Scenario pages (danger matrix)

Each targets a specific risk identified when making morph the default. Compare morph="$true" vs classic replacement, and watch focus / observer / request behaviour.

• Expansion sections vs morphs - does an open AjaxExpansion survive an update of its enclosing container?
• Focus & input state preservation - does typing survive an update?
• Observer / request accumulation - do repeated updates stack observers?
• Nested update containers - inner containers refreshed by an outer morph.
• UUID / dashed element ids - the eval-global throw class.
• Inline script execution - do per-update scripts still run under morph?
• Dropdown stays within viewport - sizing/flip near edges.
• Row identity under morph - does deleting a row shift data to the wrong line?
• Multiple observe fields on one field - do all observers on a field fire (guard not over-deduping)?
• Multi-container update - one link refreshes 3 containers in ONE request (updateContainerID="a;b;c").
• Server-side update targeting - the action picks the containers (AjaxUpdater.triggerUpdate), not the client.
• Server-side update (fragments) - the modern path: action declares the set, response carries fragments (no AUC.update JS).
• Checkbox observe (partial submit) - does toggling a checkbox round-trip BOTH ways (unchecked submits nothing)?
• Tabs without AjaxTabbedPanel - a tabbed panel built from just AjaxUpdateContainer + AjaxUpdateLink, showing the packaged component isn't needed.

Component gallery

One page per component, each inside an update container with a morph toggle, for behavioural and regression testing.

• AjaxUpdateContainer
• AjaxSlim AjaxUpdateContainer - the AjaxSlim rewrite (fetch + Idiomorph, zero Prototype). Resolves to AjaxSlim only once the dep is swapped.
• wonder-select - morph-native searchable select (via class).
• AjaxPopUpButton - the explicit element form.
• AjaxBrowser - the multi-select form.
• Large list - render performance with 2000 options.
• ERXWOComponentInstance - embedding a component instance the page constructed and configured itself; replacing it; the stateless guard.