ajax-fragment-element

<ajax-fragment>

A custom element to enable partial page updates via AJAX.

Demo

Examples

  <ajax-fragment id="filters" target="posts">
    <form method="get" data-use-ajax>
      <!-- Form HTML omitted for brevity -->
    </form>
  </ajax-fragment>

  <ajax-fragment id="posts">
    <ol>
      <li><!-- Post HTML omitted for brevity --></li>
      <li><!-- Post HTML omitted for brevity --></li>
      <li><!-- Post HTML omitted for brevity --></li>
    </ol>
  </ajax-fragment>

Installation

Choose one of the following options:

  1. Install via npm: npm install @dweidner/ajax-fragment-element
  2. Download the source manually from GitHub into your project.
  3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="ajax-fragment-element.js"></script>
<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://www.unpkg.com/@dweidner/ajax-fragment-element@1.0.0"></script>
<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@dweidner/ajax-fragment-element@1.0.0"></script>

Features