htmx, 行削除ボタンの確認部品表示

概要:

前scrap続編で、htmx関連でjavascript書かずに、インタラクティブ機能追加メモになります。

• 前のCRUD的参考に、一覧に削除ボタンを追加
• 指定行、位置に、確認削除枠を表示し。さらに確認ボタンを押すと削除(API連携)

[ 作成日: 2024/07/16 ]

---

環境

• htmx
• Vite
• React
• react-dom
• express

---

• deleteボタン押下、確認枠「confirm ...」を、 hx-targetでレンダリングします。

---

• 一覧
• sample/api_test/src/pages/TestApi.tsx

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

---

• hx-post: 確認部品html 呼び出す
• hx-target: 指定位置に、htmlレンダリング

        <form className="my-0"
          hx-post="/api/test/render_confirm1"
          hx-trigger="submit"
          hx-target={`#resulte_text${item.id}`} >
          <input type="hidden" name="id" defaultValue={item.id} />
          <button type="submit"
          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"
          >Delete</button>
        </form>
        <div id={`resulte_text${item.id}`}></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_confirm1", async function(req: any, res: any) {
  try {
console.log(req.body);
    const htm = htmConfirm1(req.body.id);
    res.send(htm);
  } catch (error) {
    console.error(error);
    res.sendStatus(500);
  }
});

---

• 追加する、削除ボタンを配置する確認枠
• sample/api_test/src/routes/test/renderHtml.ts

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

---

• html出力します。

export function htmConfirm1(id: string){
  return `
  <div>
    <hr />
    <h3 class="text-3xl font-bold">Confirm, OK?</h3>
    <form
    hx-post="/api/test/delete"
    hx-trigger="submit"
    hx-target="#resulte_confirm${id}"
    >
      <input type="text" name="id" value="${id}" />
       <button type="submit">[ Delete ]</button>
    </form>
    <div id="resulte_confirm${id}"></div>
  </div>
  `;
}

---

書いたコード

• https://github.com/kuc-arc-f/express_47htmx/tree/main/sample/api_test

https://github.com/kuc-arc-f/express_47htmx/tree/main/sample/api_test

---

GIF

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

---