<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>

• Use the target attribute to reference another fragment in the same document.

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/[email protected]"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@dweidner/[email protected]"></script>

Features

• Load a partial page fragment via AJAX
• Customizable morphing strategy