概要:

前scrap続編で、htmx関連でjavscriptなし目標で、インタラクティブ機能追加メモになります。

• 前のCRUD的参考に、一覧に詳細dialog表示

[ 作成日: 2024/07/16 ]

---

環境

• htmx
• Vite
• react-dom, JSX
• express
• tailwindcss

---

• リスト、指定行詳細データ、doalog要素で表示する component

---

• sample/api_test/src/pages/Htmx6.tsx
• リストデータは、固定配列値です

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/api_test/src/pages/Htmx6.tsx

---

• hx-target: dialog要素レンダリング
• hx-on--after-request:doalog起動

    {/* List */}
    {pageItems.map((item: any, index: number) => {
    return (
    <div key={index}>
      <h3 className="text-3xl font-bold">{item.title}</h3>
      <span>ID: {item.id}</span>
      <a href={`/testapishow/${item.id}`}>
        <button
        className="ms-2 bg-transparent hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-1 px-4 border border-purple-500 hover:border-transparent rounded"
        >Show</button>
      </a>
      <form className="my-0"
        hx-post="/api/test/render_confirm2"
        hx-trigger="submit"
        hx-target={`#resulte_text${item.id}`} 
        hx-on--before-request={`beforePostForm1(${item.id})`}
        hx-on--after-request={`afterPostForm1(${item.id})`}
        >
        <input type="text" name="id" defaultValue={item.id} />
        <button type="submit">[ open ]</button>
      </form>
      <div id={`resulte_text${item.id}`}></div>
      <hr />
    </div>
    )
    })}

---

• API
• sample/api_test/src/routes/test.ts

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/api_test/src/routes/test.ts

---

router.post("/render_confirm2", async function(req: any, res: any) {
  try {
console.log(req.body);
    const id = req.body.id;
    const htm = renderToString(
      ConfirmDialog({message: "OK, Save", id: Number(id) })
    );
console.log(htm);
    res.send(htm);
  } catch (error) {
    console.error(error);
    res.sendStatus(500);
  }
});

---

• apiから呼ぶcomponent
• sample/api_test/src/routes/test/ConfirmDialog.tsx

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/api_test/src/routes/test/ConfirmDialog.tsx

---

GIF

https://x.com/kuc_arc_f/status/1814243223927415076

---