Update multiple elements from a single response
LokaScript supports two patterns for multi-target updates:
Explicit swaps: Multiple swap commands in sequence
Partials:<hx-partial> elements for automatic distribution
multi-targethx-partialhtmx-likeOOB updates
Demo 1: Explicit Multi-Swap
Multiple swap commands update different parts of the page:
Main Content
Welcome
Click the button to update all panels
Statistics
Stats
0
Sidebar
Sidebar
Additional info here
Notifications
No new notifications
Waiting...
Demo 2: Process Partials
Use <hx-partial> elements to specify targets:
How it works: The server returns HTML with <hx-partial target="#id">
elements. LokaScript extracts each partial and swaps it into the specified target.
Main (partial)
Waiting for partial...
Click the button above
Counter (partial)
Counter
?
Alerts (beforeEnd strategy)
Alerts will append here...
Demo 3: Dashboard Refresh (Simulated API)
Simulates fetching a dashboard response with multiple components:
Users
Active Users
---
Revenue
Revenue
$---
Orders
Orders
---
Activity Log
Activity will appear here...
The Code
Explicit Multi-Swap:
on click
fetch"/api/dashboard"as json
put it.data into data
-- Update multiple targetsswap #main with data.main
swap #sidebar with data.sidebar
swap #notifications with data.notifications
hx-partial Response Format:
<hx-partialtarget="#main"><!-- Content for #main -->
<div>Main content here</div>
</hx-partial><hx-partialtarget="#sidebar"strategy="innerHTML"><!-- Content for #sidebar with explicit strategy -->
<nav>Sidebar content</nav>
</hx-partial><hx-partialtarget="#notifications"strategy="beforeEnd"><!-- Append to notifications -->
<div class="toast">New message!</div>
</hx-partial>
Process Partials Command:
on click
fetch"/api/dashboard"as html
process partials in it -- Finds and swaps all hx-partial elements
With View Transitions:
on click
fetch"/api/dashboard"as html
process partials in it using view transition
How it works:
Explicit swaps: Just chain multiple swap commands
hx-partial: Server returns structured response with targets
process partials extracts and distributes content automatically