Events

• ajaxComplete
• breeze:load
• breeze:mount
• breeze:resize
• contentUpdated
• validateAfter

ajaxComplete

• ajaxComplete — dispatched every time after $.request was used to send ajax request.

  Usage example:

  $(document).on('ajaxComplete', function (event, data) {
      var response = data.response,
          request = data.response.req,
          body = response.body,
          url = request.url;
  });
  

breeze:load

• breeze:load — dispatched when page is loaded.

  Do not use native DOMContentLoaded event as it doesn’t work in a way as you may expect when Turbo mode in enabled.

  Usage Example:

  $(document).on('breeze:load', function () {
      initFormKey();
  });
  

breeze:mount

• breeze:mount — dispatched every time before component initialization.

  Usage example:

  $(document).on('breeze:mount', function (event, data) {
      console.log(data.__component);
      console.log(data.el);
      console.log(data.settings);
  });
  

• breeze:mount:<Component/alias> — same as above, but for specific component.

  Usage example:

  $(document).on('breeze:mount:dropdown', function (event, data) {
      console.log(data);
  });
  

breeze:resize

breeze:resize events are the debounced versions of $(window).on('resize') listener.

• breeze:resize — dispatches every time after viewport changes its dimensions.
• breeze:resize-x — dispatches every time after viewport changes its horizontal dimensions.
• breeze:resize-y — dispatches every time after viewport changes its vertical dimensions.

Usage example:

$(document).on('breeze:resize', function (event, data) {
    console.log(data.oldDimensions);
    console.log(data.newDimensions);
});

contentUpdated

• contentUpdated — You’ll want to trigger this event every time the portion of HTML content is updated and new components should be initialized.

  Usage example:

  $.request.get({
      url: 'url',
      type: 'html'
  }).then(function (response) {
      $('selector')
          .append(response.text)
          .trigger('contentUpdated');
  });
  

validateAfter

• validateAfter — dispatched after form validation. Useful to add additional validation/messages,

  Usage example:

  $(document).on('validateAfter', function (event, data) {
      console.log(data.result);
  });