{"id":5967,"date":"2024-04-19T10:59:59","date_gmt":"2024-04-19T10:59:59","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&#038;p=5967"},"modified":"2024-04-19T13:55:49","modified_gmt":"2024-04-19T13:55:49","slug":"custom-javascript-events-in-bricks","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/custom-javascript-events-in-bricks\/","title":{"rendered":"Custom JavaScript events in Bricks"},"content":{"rendered":"\n<p>Bricks offers a range of custom JavaScript events that you can leverage to enhance the functionality and interactivity of your website. These events allow you to respond to specific actions or changes within your Bricks-powered site. Let&#8217;s explore the custom events available in Bricks:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Form element events<\/h2>\n\n\n\n<ul>\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/interactions\/#trigger-form-submit\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/form\/submit<\/a> Emitted before an AJAX call for form submission is made.<\/li>\n\n\n\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/interactions\/#trigger-form-success\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/form\/success<\/a> Emitted after a successful form submission AJAX call is returned.<\/li>\n\n\n\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/interactions\/#trigger-form-error\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/form\/error<\/a> Emitted after an error in the form submission AJAX call is returned.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Tabs \/ Tabs (Nestable) element events<\/h2>\n\n\n\n<ul>\n<li><a href=\"#bricks-tabs-changed-code\">bricks\/tabs\/changed<\/a>: Emitted after click on a tab title (<code>@since 1.9.8<\/code>)<\/li>\n<\/ul>\n\n\n\n<pre id=\"bricks-tabs-changed-code\" class=\"wp-block-code prettyprint\"><code>\/\/ Listen for the 'bricks\/tabs\/changed' event\ndocument.addEventListener('bricks\/tabs\/changed', (event) =&gt; {\n  \/\/ Extract information from the event detail\n  const { elementId, activeIndex, activeTitle, activePane } = event.detail;\n  \n  \/\/ Only target elementID lwxvfh\n  if( elementId !== 'lwxvfh' ) {\n    return;\n  } \n\n  \/\/ Example: Log the details to the console\n  console.log(`Tabs Changed - Element ID: ${elementId}, Active Index: ${activeIndex}, Active Title: ${activeTitle}, Active Pane: ${activePane}`);\n\n  \/\/ Your custom logic here\n  \/\/ For example, update the UI based on the tab change\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Accordion \/ Accordion (Nestable) element events<\/h2>\n\n\n\n<ul>\n<li><a href=\"#bricks-accordion-open-code\">bricks\/accordion\/open<\/a>: Emitted after an accordion item is opened\/expanded via click action (<code>@since 1.9.8<\/code>)<\/li>\n\n\n\n<li><a href=\"#bricks-accordion-close-code\">bricks\/accordion\/close<\/a>: Emitted after an accordion item is closed\/collapsed via click action (<code>@since 1.9.8<\/code>)<\/li>\n<\/ul>\n\n\n\n<pre id=\"bricks-accordion-open-code\" class=\"wp-block-code prettyprint\"><code>\/\/ Listen for the 'bricks\/accordion\/open' event\ndocument.addEventListener('bricks\/accordion\/open', (event) =&gt; {\n  \/\/ Extract information from the event detail\n  const { elementId, openItem } = event.detail;\n\n  \/\/ Only target elementID qwe3th\n  if( elementId !== 'qwe3th' ) {\n    return;\n  } \n\n  \/\/ Example: Log the details to the console\n  console.log(`Accordion Opened - Element ID: ${elementId}, Open Item ID: ${openItem}`);\n\n  \/\/ Your custom logic here\n  \/\/ For example, update the UI based on the accordion item being opened\n});\n<\/code><\/pre>\n\n\n\n<pre id=\"bricks-accordion-close-code\" class=\"wp-block-code prettyprint\"><code>\/\/ Listen for the 'bricks\/accordion\/close' event\ndocument.addEventListener('bricks\/accordion\/close', (event) => {\n  \/\/ Extract information from the event detail\n  const { elementId, closeItem } = event.detail;\n\n  \/\/ Only target elementID qwe3th\n  if( elementId !== 'qwe3th' ) {\n    return;\n  } \n\n  \/\/ Example: Log the details to the console\n  console.log(`Accordion Closed - Element ID: ${elementId}, Closed Item ID: ${closeItem}`);\n\n  \/\/ Your custom logic here\n  \/\/ For example, update the UI based on the accordion item being closed\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Animation events<\/h2>\n\n\n\n<ul>\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/interactions\/#bricks-animation-end-code\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/animation\/end\/{animationId}<\/a>: Emitted when a specified animation (identified by {animationId}) completes its playback.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Popup events<\/h2>\n\n\n\n<ul>\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/popup-builder\/#bricks-popup-open-close-code\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/popup\/open<\/a> Emitted after popup opened.<\/li>\n\n\n\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/popup-builder\/#bricks-popup-open-close-code\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/popup\/close<\/a> Emitted after popup closed.<\/li>\n\n\n\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/popup-builder\/#ajax-events\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/ajax\/popup\/start<\/a> Emitted before making an AJAX popup call.<\/li>\n\n\n\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/popup-builder\/#ajax-events\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/ajax\/popup\/end<\/a> Emitted after completing an AJAX popup call.<\/li>\n\n\n\n<li><a href=\"https:\/\/academy.bricksbuilder.io\/article\/popup-builder\/#ajax-events\" target=\"_blank\" rel=\"noreferrer noopener\">bricks\/ajax\/popup\/loaded<\/a> Emitted after adding AJAX popup content to the DOM.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">AJAX popup open event sequence<\/h3>\n\n\n\n<ol>\n<li>bricks\/ajax\/popup\/start<\/li>\n\n\n\n<li>bricks\/ajax\/popup\/end<\/li>\n\n\n\n<li>bricks\/ajax\/popup\/loaded<\/li>\n\n\n\n<li>bricks\/popup\/open<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Bricks AJAX events<\/h2>\n\n\n\n<p class=\"callout-blue\">Bricks AJAX = Infinite Scroll, Load More, AJAX Pagination, or Query Filter.<\/p>\n\n\n\n<ul>\n<li><a href=\"#bricks-ajax-start-code\">bricks\/ajax\/start<\/a>: Emitted before a Bricks AJAX call is made.<\/li>\n\n\n\n<li><a href=\"#bricks-ajax-end-code\">bricks\/ajax\/end<\/a>: Emitted after completing a Bricks AJAX call.<\/li>\n\n\n\n<li><a href=\"#bricks-ajax-pagination-completed-code\">bricks\/ajax\/pagination\/completed<\/a>: Emitted after an AJAX pagination call is completed.<\/li>\n\n\n\n<li><a href=\"#bricks-ajax-load_page-completed-code\">bricks\/ajax\/load_page\/completed<\/a>: Emitted after an Infinite scroll AJAX call is completed.<\/li>\n\n\n\n<li><a href=\"#bricks-ajax-query_result-completed-code\">bricks\/ajax\/query_result\/completed<\/a>: Emitted after a Query filter AJAX call is completed.<\/li>\n\n\n\n<li><a href=\"#bricks-ajax-query_result-displayed-code\">bricks\/ajax\/query_result\/displayed<\/a>: Emitted after adding all filtered results to the DOM.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Infinite scroll event sequence<\/h3>\n\n\n\n<ol>\n<li>bricks\/ajax\/start<\/li>\n\n\n\n<li>bricks\/ajax\/end<\/li>\n\n\n\n<li>bricks\/ajax\/load_page\/completed<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">AJAX pagination event sequence<\/h3>\n\n\n\n<ol>\n<li>bricks\/ajax\/start<\/li>\n\n\n\n<li>bricks\/ajax\/end<\/li>\n\n\n\n<li>bricks\/ajax\/pagination\/completed<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">AJAX filter event sequence<\/h3>\n\n\n\n<ol>\n<li>bricks\/ajax\/start<\/li>\n\n\n\n<li>bricks\/ajax\/end<\/li>\n\n\n\n<li>bricks\/ajax\/query_result\/completed<\/li>\n\n\n\n<li>bricks\/ajax\/query_result\/displayed<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<pre id=\"bricks-ajax-start-code\" class=\"wp-block-code prettyprint\"><code>document.addEventListener('bricks\/ajax\/start', (event) =&gt; {\n  \/\/ Get the queryId from the event\n  const queryId = event.detail.queryId || false;\n\n  if (!queryId) {\n    return;\n  }\n\n  \/\/ Your custom logic here\n  \/\/ For example, initiate a loader or update UI to indicate AJAX request start\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<pre id=\"bricks-ajax-end-code\" class=\"wp-block-code prettyprint\"><code>document.addEventListener('bricks\/ajax\/end', (event) =&gt; {\n  \/\/ Get the queryId from the event\n  const queryId = event.detail.queryId || false;\n\n  if (!queryId) {\n    return;\n  }\n\n  \/\/ Your custom logic here\n  \/\/ For example, initiate a loader or update UI to indicate AJAX request end\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<pre id=\"bricks-ajax-pagination-completed-code\" class=\"wp-block-code prettyprint\"><code>document.addEventListener('bricks\/ajax\/pagination\/completed', (event) =&gt; {\n  \/\/ Extract queryId from the event detail\n  const queryId = event.detail.queryId;\n\n  \/\/ Your custom logic here\n  \/\/ For example, handle the completed pagination for the specific queryId\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<pre id=\"bricks-ajax-load_page-completed-code\" class=\"wp-block-code prettyprint\"><code>document.addEventListener('bricks\/ajax\/load_page\/completed', (event) =&gt; {\n  \/\/ Extract information from the event detail\n  const { queryTrailElement, queryId } = event.detail;\n\n  \/\/ Your custom logic here\n  \/\/ For example, handle the completed AJAX page load for the specific queryId and queryTrailElement\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<pre id=\"bricks-ajax-query_result-completed-code\" class=\"wp-block-code prettyprint\"><code>document.addEventListener('bricks\/ajax\/query_result\/completed', (event) =&gt; {\n  \/\/ Extract information from the event detail\n  const queryId = event.detail.queryId;\n\n  \/\/ Your custom logic here\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<pre id=\"bricks-ajax-query_result-displayed-code\" class=\"wp-block-code prettyprint\"><code>document.addEventListener('bricks\/ajax\/query_result\/displayed', (event) =&gt; {\n  \/\/ Extract information from the event detail\n  const queryId = event.detail.queryId;\n\n  \/\/ Your custom logic here\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Bricks offers a range of custom JavaScript events that you can leverage to enhance the functionality and interactivity of your website. These events allow you to respond to specific actions or changes within your Bricks-powered site. Let&#8217;s explore the custom events available in Bricks: Form element events Tabs \/ Tabs (Nestable) element events Accordion \/ [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"menu_order":2,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/5967"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/6"}],"version-history":[{"count":31,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/5967\/revisions"}],"predecessor-version":[{"id":6045,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/5967\/revisions\/6045"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=5967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}