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.

Integration scenario

• Invoice editor - a real-feeling app that uses EVERY AjaxSlim element together. The grand total is a live sum across several elements, so any cross-element conflict makes it visibly wrong. Best demo + integration test.

Reference

• AjaxSlim element reference - the canonical reference for every AjaxSlim element: what it does and its full bindings table.
• Ajax framework overview - a catalogue of the legacy Ajax framework's elements, grouped by role, with a maturity badge each.

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.

• 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").
• Checkbox observe (partial submit) - does toggling a checkbox round-trip BOTH ways (unchecked submits nothing)?

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.