Skip to content

Emit events by default on load and error

Compare
Choose a tag to compare
@nikolalsvk nikolalsvk released this 22 Mar 17:13
· 79 commits to master since this release

🔥 Firing events on success and fail by default

In this version, render_async will emit emits by default. If your request is finished successfully, a render_async_load event will fire. If it goes badly, the render_async_error will fire.

You can then catch these events in your code with something like this:

document.addEventListener('render_async_load', function(event) {
  console.log('Async partial loaded in this container:', event.container);
});
document.addEventListener('render_async_error', function(event) {
  console.log('Async partial could not load in this container:', event.container);
});

👁 Making DOM element available in events

As you've seen in the previous example, you can now access event.container which will give you the associated DOM element. DOM element will be the one it just got replaced after the request has finished.

🔨 Fix of #90

Toggle event listeners are not added after the page has loaded.

Note

If you're using jQuery to trigger an event like so

$(document).ready(function(){
  $("#render-async-trigger").trigger('click');
});

Make sure you're using render_async with jQuery configuration set to true!

OR

If you're using it with Vanilla JS (as is, as installed), make sure to register these events after the DOMContentLoaded is fired!