Versions

  • v6

    6/13/2024
    Open: Version
    Changes 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 ⦚
  • v5

    6/13/2024
    Open: Version
    Changes 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 ⦚
  • v4

    6/13/2024
    Open: Version
    Changes 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 ⦚
  • v3

    6/13/2024
    Open: Version
    Changes 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 ⦚
  • v2

    6/13/2024
    Open: Version
    Changes 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 alpine
    document.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 ⦚
  • v1

    6/13/2024
    Open: Version
    Changes from v0 to v1
    +66
    -0

    import { Hono } from "npm:hono";

    const app = new Hono();

    // Endpoint to catch and log the submitted name
    app.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.js
    app.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 alpine
    document.addEventListener('htmx:afterSwap', (event) => this.updateOutput(event));
    },
    updateOutput(event) {
    console.log('output!!', event.detail.xhr.response);
    this.output = JSON.parse(event.detail.xhr.response);
    },
    }))
  • v0

    6/13/2024
    Open: Version
    +0
    -0


1
Next
yawnxyz-honoalpinehtmxdemo.web.val.run
Updated: June 13, 2024