imacrayon / alpine-ajax

An Alpine.js plugin for building server-powered frontends.
https://alpine-ajax.js.org
MIT License
558 stars 11 forks source link

Add `ajax:merge` and `ajax:merged` events #62

Closed imacrayon closed 6 months ago

imacrayon commented 6 months ago

This PR introduces two new events to the AJAX request lifecycle:

ajax:merge: Fired when new content is being merged into a target:

window.addEventListener('ajax:merge', (event) => {
  // Override the merge
  event.preventDefault()

  // Do stuff with the target, response, or content
  // event.target.id
  // event.detail.response.status
  // event.detail.content.querySelector(...)
  // You can even change the content being merged
  event.detail.content.innerHTML = '<p>This is kind of crazy</p>'

  // Complete the merge
  event.detail.merge()
})

ajax:merged: Fired after a target has been merged:

window.addEventListener('ajax:merged', (event) => {
  alert(`Target #${event.target.id} has been changed!`)
})

Resolves #55