ダイアログ

ダイアログは、hx-prompt 属性と hx-confirm 属性を使用してトリガーできます。これらは AJAX リクエストをトリガーするユーザーの操作によってトリガーされますが、リクエストはダイアログが承認された場合にのみ送信されます。

<div>
  <button class="btn primary"
          hx-post="/submit"
          hx-prompt="Enter a string"
          hx-confirm="Are you sure?"
          hx-target="#response">
    Prompt Submission
  </button>
  <div id="response"></div>
</div>

プロンプト ダイアログにユーザーが提供した値は、HX-Prompt ヘッダーでサーバーに送信されます。この場合、サーバーは単純にユーザーの入力をエコーバックします。

User entered <i>${response}</i>

🔗デモ