Live Content - What Framework?

Live Content Loading

Use w-get with w-target and w-swap to control where and how content is inserted.

Live (no page reload):

Traditional (full reload):

replace prepend append

🔔

Notification 1

Via page reload (prepend mode)

Counter: 1 (live)

<button
  w-get="/partials/notification"
  w-target="#target"
  w-swap="replace">
  Load Content
</button>

<div id="target">
  Content appears here...
</div>

Attributes

Available attributes for controlling live content behavior.

Attribute	Description
`w-get="url"`	Fetch via GET
`w-post="url"`	Fetch via POST
`w-target="sel"`	CSS selector for target
`w-swap="mode"`	Insertion mode
`w-params="{}"`	JSON params to send
`w-include="sel"`	Include form values

<!-- GET request -->
<button w-get="/api/data" w-target="#result">
  Load
</button>

<!-- POST with params -->
<button
  w-post="/api/submit"
  w-target="#result"
  w-params='{"id": 123}'>
  Submit
</button>

<!-- Include form values -->
<button
  w-get="/search"
  w-target="#results"
  w-include="#search-form">
  Search
</button>

Insertion Modes

How fetched content is inserted into the target element.

Mode	Description
`replace`	Replace inner content (default)
`prepend`	Insert at beginning
`append`	Insert at end
`before`	Insert before element
`after`	Insert after element
`none`	Execute without DOM change

<!-- Replace content -->
<button w-get="/content" w-swap="replace">

<!-- Add to list -->
<button w-get="/item" w-swap="append">

<!-- Execute without showing -->
<button w-get="/action" w-swap="none">