v0.6.0

This update refactors a lot of the Alpine AJAX internals to make it more compact and predictable. We've shaved some code to make room for new automatic pre-fetching and optimistic UI features coming soon. We've also sorted out some edge cases and improved compatible with Alpine's reactivity features.

Breaking Change

There's a single breaking change in this release: $ajax no longer inherits options from other Alpine AJAX attributes. Mixing $ajax with attributes has been a point of confusion and code complexity, so we're simplifying how things work.

If you have an element that's mixing $ajax with attributes like this:

<div @click="$ajax('https://...')" x-target.push="my_target" x-headers="{ 'x-csrf': 'token' }">

Refactor to this:

<div @click="$ajax('https://...', { 
  target: 'my_target',
  history: 'push',
  headers: { 'x-csrf': 'token' } 
})">

The Infinite Scroll Example previously mixed x-target and $ajax to handle pagination, so if you've used that example in the past, be sure to update your code.

What's Changed

• Polyfills for HTMLFormElement.requestSubmit and SubmitEvent.submitter have been removed since they have broad browser support.
• $ajax emits all the same lifecycle events as x-target
• The x-target "submit" and "click" events are delegated to event listeners on the window.document. These global listeners can be toggled by calling Alpine.ajax.stop() and Alpine.ajax.start() if you need to do that for some reason.
• Renamed “Missing Target” Error to “TargetError”
• Renamed “Missing ID” Error to “IDError”

Additions

• Added x-target:dynamic for dynamically generating target IDs
• Added x-merge:dynamic for dynamically generating a merge strategy
• Added Alpine.ajax.stop() and Alpine.ajax.start() to globally disable/enable x-target event listeners

Fixes

• Fixed an edge case where form controls named id would break rendering (#64)
• Fixed URL query parameters not merging correctly when changing history state
• x-headers now respects x-data values

Full Changelog: v0.5.1...v0.6.0

v0.5.1

This patch release fixes the autofocus algoritm so that hidden [autofocus] & [x-autofocus] elements will not be given focus.

v0.5.0

This release is focused on giving you more control over the request and rendering lifecycle of Alpine AJAX. To that end we've introduced a few new attributes and events. We've also revamped focus management to make it easier to control keyboard focus as content on the page changes. Lastly, we've made Alpine AJAX 30% smaller by decoupling our DOM morphing logic into a separate, optional, plugin.

Breaking Changes

1. x-focus removed in favor of x-autofocus

In most situations you can remove x-focus and add x-autofocus to the element what was being targeted by x-focus. In more complex situations you can listen for the new ajax:merged event and do whatever you want with focus in the event handler.

2. Decoupled Morph into a separate plugin

If your project is using x-merge="morph" install the Alpine Morph Plugin and you're good to go. Using the "morph" strategy without first installing the plugin will now throw an exception and prompt you to install the plugin. Our documentation examples have been updated to include install instructions when the Morph Plugin is required.

Additions

• Added a global headers configuration option for customizing request headers for every request
• Added x-headers and $ajax headers option for customizing request headers per request #49
• Added ajax:merge and ajax:merged events for customizing and reacting to merged content #62
• Added x-autofocus to declarative control keyboard focus after content is merged #56
• Added x-target.nofocus modifier to disable autofocus behavior

Fixes

• Changed the default enctype for AJAX requests to application/x-www-form-urlencoded in #61
• Elements with autofocus will be focused after a merge #56
• Form submissions now respect formaction and formmethod attributes #60
• Right clicking a link won't fire an AJAX requests #59
• History is updated before merging content so that relative URLs resolve correctly #58

Full Changelog: v0.4.3...v0.5.0

v0.4.3

Fixes an bug caused by form requests issues without a submitter (#48)

v0.4.2

What's Changed

• Allow disabling AJAX per submit element by @bgilhome-now in #42

New Contributors

• @bgilhome-now made their first contribution in #42

Full Changelog: v0.4.1...v0.4.2

v0.4.1

Fixes x-merge when the directive is located outside of an Alpine component.

v0.4.0

What's New

• Added History API support in #37
• Added View Transitions API support in #18
• Documented x-Alpine-Request header by @adamchainz in #36
• Fixed document typos by @hirasso in #38

New Contributors

• @adamchainz made their first contribution in #36
• @hirasso made their first contribution in #38

Full Changelog: v0.3.0...v0.4.0

v0.3.0

This release cleans up some edge case bugs, adds some global configuration options, and some new x-target modifiers to handle redirect responses from your server.

Changed

• x-target now requires an accompanying x-data or x-init, like a normal Alpine directive.

  <!-- Before -->
  <form x-target="...">
  </form>
  
  <tbody>
    <a x-target="...">
  </tbody>
  
  <!-- After -->
  <form x-init x-target="...">
  </form>
  
  <tbody x-init>
    <a x-target="...">
  </tbody>
  
  

• x-arrange has been renamed to x-merge.
  Do a find and replace in your project: x-arrange -> x-merge.

Fixed

• Request data is correctly added to the URL query string when issuing a GET request using $ajax().
• Response promises are unwrapped in the browser console when using the Mock Server.
• Removed a race condition that was causing flaky tests.

Added

• x-target.nofollow will cause the browser window to reload when a redirect (3xx) response is encountered. More info in the Handling Redirects section.
• You can set global configuration options when importing Alpine AJAX in your code.
• $ajax() now accepts target or targets as an option.
• $ajax() now accepts followRedirects to change the redirect behavior of the AJAX request, just like the x-target.nofollow modifier.
• Source files are available in the NPM distribution now.

Full Changelog: v0.2.1...v0.3.0

v0.2.1

Fixed

• aria-busy is properly removed from targets after new content is appended.

Improved

• You'll see a friendly error message if you try to target an element that's not in the document. The previous message was very cryptic.

Full Changelog: v0.2.0...v0.2.1

v0.2.0

This is a big release, we've streamlined the Alpine AJAX API, and AJAX attributes are no longer inherited by child elements. These changes mean that your UIs will be more stable and less prone to unintended side-affects (you don't have to litter your HTML with x-noajax anymore). The projects I've upgraded to v0.2 so far have ended up requiring slightly less code which is always a win. These API changes have also lead to some performance gains and opened the door for two new attributes: x-arrange and x-focus. Keep reading for full details on everything that has changed and guidance on upgrading from v0.1 to v0.2. While this release will require some code migration, it will improve the overall stability of your projects and make any future upgrades a lot less painful.

Changed

• Alpine AJAX is now bundled with the Alpine Morph plugin, so you can remove the Morph dependency from your project.
• The x-ajax attribute has been removed. Add x-target to all links and forms that were previously nested under a x-ajax element. x-noajax can be removed completely. Also keep in mind that if you're using event listeners, you need to use x-init or x-data.

<!-- Before -->
<div x-ajax id="comments">
  <form id="comment_form" x-target="comment_form" @ajax:success="doSomething()">
    <input ...>
    <button>Submit</button>
  </form>
  <a href="/comments?page=2">Page 2</a>
  <a x-noajax href="/link">Link without AJAX</a>
</div>

<!-- After -->
<!-- Remove x-ajax -->
<div id="comments">
  <!-- Add x-init on the form to handle the event listener -->
  <form id="comment_form" x-target="comment_form" x-init @ajax:success="doSomething()">
    <input ...>
    <button>Submit</button>
  </form>
  <!-- Add x-target to make this link issue  AJAX requests -->
  <a href="/comments?page=2" x-target="comments">Page 2</a>
  <!-- Remove `x-noajax`, links without x-target are just normal links -->
  <a href="/link">Link without AJAX</a>
</div>

• The x-load attribute has been removed. Replace it with x-init.
• Incoming content is no longer inserted into the DOM using the Alpine Morph algorithm by default. The new default simply replaces the content without intelligently diffing the elements. This should be a low impact change, however in cases where you have Alpine component state you need to preserve across requests or if you're making updates to controls within a form, you may have broken functionality; In these cases you can restore the old default behavior by adding x-arrange="morph" to the targeted element. The toggle button pattern is an example of where you would need morph, so that keyboard focus is preserved on the button when the HTML is replaced:

<!-- Before -->
<form x-ajax id="star_repo" method="post" action="/repos/1/star">
<button>Toggle Button</button>
</form>

<!-- After -->
<form x-target id="star_repo" x-morph="arrange" method="post" action="/repos/1/star">
<button>Toggle Button</button>
</form>

Added

• New x-arrange attribute for arranging incoming content on the page.
• New x-focus attribute for controlling keyboard focus.
• New Infinite Scroll pattern example