This shit could not be easier.

Zjax gives you z-swap and z-action attributes to use in your HTML. That's it.

Nothing to install.

Just link to the CDN.

<head>
  <script src="https://unpkg.com/zjax@3.0.4"></script>
  ...
</head>

Use z-swap to update parts of your DOM with AJAX.

<button z-swap="@click GET /some-path #cart">
  Add to cart
</button>

When this button is clicked, the #cart element from the response will replace the #cart element in the current DOM.

Use z-action to attach client-side scripts.

<button z-action="@click $('#menu').remove()">
  ✕
</button>

The $() selector syntax makes it easy to use standard JavaScript to manipulate the DOM. This can be done right inline as seen above or referenced externally like this:

<button z-action="@click closeMenu">✕</button>

In order for the above to work, we'll need to register an action handler on the global zjax.actions object like this:

zjax.actions = {
  closeMenu($) {
    $('#menu').remove();
  }
}

Of course, you aren't limited to simple one-liners. Any valid JavaScript can be used in an action function including even asynchronous operations like awaiting a response from a remote API.

…and that's just for appetizers.

Zjax fully supports CSS transitions, swapping multiple elements at the same time, using the return value of an action to trigger a swap, robust response error handling, and much more.

Read the Docs