v0.1.9

Added

• Pollyfilled HTMLFormElement.requestSubmit()

v0.1.8

Added

• New mock server utility for building Alpine AJAX demos in environments like CodePen.

Fixed

• The fallback behavior for failed AJAX responses has been made more stable. Now, when an AJAX response returns a failed status code, and the response body does not contain a valid target element, links and forms will simply perform a standard navigation or form submission with AJAX behavior disabled.

v0.1.7

Added

• New Inline Validation example in the docs.

Fixed

• Issue parsing the body value in the $ajax options object.

v0.1.5

This release fixes an edge case where forms without an action attribute would issue a request to the wrong endpoint when nested inside a lazy loaded section of the page.

v0.1.4

This release fixes some regressions when targeting AJAX components. The target attribute also had to be renamed because it conflicted with the standard HTML target attribute when JavaScript was unavailable.

Broke

• The target attribute was renamed x-target.
• The noajax attribute was renamed x-noajax.

v0.1.3

Fixes submit button values not being included in GET requests.

v0.1.2

1. Fixed focus regressions caused by the v0.1 initial-focus behavior.
2. Renamed the undocumented initial-focus attribute to focus.

v0.1.1

Broke

There's four breaking changes in this release, but the upgrade path should be fairly painless.

1. Decoupled Alpine Morph

The Alpine morph plugin is now decoupled from the codebase (#5).

You'll need to include the separate Alpine morph plugin before Alpine AJAX. Check the docs for updated installation instructions and code examples.

2. Renamed x-target to target

Do a find and replace: x-target is now target.

3. Simplified x-load

x-load has been reworked to function like an AJAX version of x-init, check the updated x-load docs for more info.

You can recreate all the old functionality that x-load provided by using the new $ajax magic:

• Lazy loading: Change x-load="/comments" to x-init="$ajax('/comments')"
• Polling: Change x-load.600ms="/comments" to x-init="setTimeout(() => $ajax('/comments'), 600)"
• Listening for events: Change x-load:comment_added="/comments" to @comment_added.window="$ajax('/comments')". Note the .window after the event name.

4. Links are links

Before this release, links inside an AJAX component were transformed into buttons. This was removed for two reasons:

1. It created inconsistent experiences for users when JavaScript was unavailable
2. It broke compatibility with link pre fetching libraries Instant Page and Google's Quicklink.

If your code relied on links being converted to buttons you'll need to update your code.

Added

• New $ajax magic for issuing AJAX requests programmatically.
• x-ajax and x-load can be used like x-init, without an accompanying x-data`.
• A new ESM build is included in the /dist directory.
• A ajax:missing event now fires when a matching target is not found in an AJAX response.
• The page will now redirect to the requested endpoint if an AJAX response returns a 400 or 500 status and a matching target is not found.
• Improved focus management, you can use the initial-focus attribute to set focus after a target has rendered.
• All new features and changes have been added to the docs.

Changed

• Refactored and modularized the code base
• Switched from Rollup to esbuild for bundling
• Bumped the Cypress version and cleaned up some test files

v0.0.22

Fixes

• Fixed regression when importing @imacrayon/alpine-ajax

Added

• Form submit buttons are automatically disabled during an AJAX request
• The aria-busy attribute is added to targets while an AJAX request is processing.
• Added Loading States to the documentation
• Added Loading Indicator example to the documentation

v0.0.19

Add polling capabilities to x-load:

<div id="jobs" x-data x-load.600ms="/jobs/1">
</div>

Will poll the endpoint and update the <div> after 600ms.

Added new documentation site! Check it out at https://imacrayon.github.io/alpine-ajax/