Versions
- Open: VersionChanges from v5 to v6+1-2⦚ 31 unchanged lines ⦚updateOutput(event) {this.output = JSON.parse(event.detail.xhr.response);
console.log('>???', event.detail.target)if (event.detail.target.id == 'output') {console.log('"output" received a swap', event.detail.xhr.response);}},⦚ 31 unchanged lines ⦚⦚ 31 unchanged lines ⦚updateOutput(event) {this.output = JSON.parse(event.detail.xhr.response);if (event.detail.target.id == 'output') {console.log('#output received a swap', event.detail.xhr.response);}},⦚ 31 unchanged lines ⦚ - Open: VersionChanges from v4 to v5+2-2⦚ 31 unchanged lines ⦚updateOutput(event) {this.output = JSON.parse(event.detail.xhr.response);
console.log('>???', evt.detail.target)if (evt.detail.target.id == 'output') {console.log('"output" received a swap', event.detail.xhr.response);}⦚ 32 unchanged lines ⦚⦚ 31 unchanged lines ⦚updateOutput(event) {this.output = JSON.parse(event.detail.xhr.response);console.log('>???', event.detail.target)if (event.detail.target.id == 'output') {console.log('"output" received a swap', event.detail.xhr.response);}⦚ 32 unchanged lines ⦚ - Open: VersionChanges from v3 to v4+1-0⦚ 31 unchanged lines ⦚updateOutput(event) {this.output = JSON.parse(event.detail.xhr.response);
if (evt.detail.target.id == 'output') {console.log('"output" received a swap', event.detail.xhr.response);}⦚ 32 unchanged lines ⦚⦚ 31 unchanged lines ⦚updateOutput(event) {this.output = JSON.parse(event.detail.xhr.response);console.log('>???', evt.detail.target)if (evt.detail.target.id == 'output') {console.log('"output" received a swap', event.detail.xhr.response);}⦚ 32 unchanged lines ⦚ - Open: VersionChanges from v2 to v3+3-1⦚ 30 unchanged lines ⦚},updateOutput(event) {
console.log('output!!', event.detail.xhr.response);this.output = JSON.parse(event.detail.xhr.response);},}))⦚ 30 unchanged lines ⦚⦚ 30 unchanged lines ⦚},updateOutput(event) {this.output = JSON.parse(event.detail.xhr.response);if (evt.detail.target.id == 'output') {console.log('"output" received a swap', event.detail.xhr.response);}},}))⦚ 30 unchanged lines ⦚ - Open: VersionChanges from v1 to v2+2-2⦚ 27 unchanged lines ⦚init() {// if you don't use an arrow function (this) will refer to document, not alpine
document.addEventListener('htmx:afterSwap', (event) => this.updateOutput(event));},updateOutput(event) {⦚ 18 unchanged lines ⦚</form><div class="htmx-container" style="margin-top:16px" ><span x-show="output">htmx response:</span><div id="output" x-text="output?.message"></div></div>⦚ 11 unchanged lines ⦚⦚ 27 unchanged lines ⦚init() {// if you don't use an arrow function (this) will refer to document, not alpinedocument.addEventListener('htmx:afterRequest', (event) => this.updateOutput(event));},updateOutput(event) {⦚ 18 unchanged lines ⦚</form><div class="htmx-container" style="margin-top:16px" ><span x-show="output">htmx response swap — set this to hidden to use the data</span><div id="output" x-text="output?.message"></div></div>⦚ 11 unchanged lines ⦚ - Open: VersionChanges from v0 to v1+66-0import { Hono } from "npm:hono";const app = new Hono();// Endpoint to catch and log the submitted nameapp.post("/submit-name", async (c) => {const data = await c.req.parseBody();console.log('data:', data, Object.keys(data));console.log("Received name:", data.name);return c.json({ message: `Received name: ${data.name}` });});// Serve the HTML page with Alpine.jsapp.get("/", (c) => {const html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Reactive Form with Alpine.js</title><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="https://unpkg.com/htmx.org"></script><script>document.addEventListener('alpine:init', () => {Alpine.data('utils', () => ({name: '',output: null,init() {// if you don't use an arrow function (this) will refer to document, not alpinedocument.addEventListener('htmx:afterSwap', (event) => this.updateOutput(event));},updateOutput(event) {console.log('output!!', event.detail.xhr.response);this.output = JSON.parse(event.detail.xhr.response);},}))
- Open: Version+0-0
yawnxyz-honoalpinehtmxdemo.web.val.run
Updated: June 13, 2024