{"id":133344,"date":"2018-12-22T10:26:15","date_gmt":"2018-12-22T10:26:15","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=133344"},"modified":"2024-02-29T12:54:43","modified_gmt":"2024-02-29T12:54:43","slug":"how-to-run-custom-js-after-ajax-call-to-custom-section-load","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/","title":{"rendered":"How to run custom JS after ajax call to custom\/section\/load"},"content":{"rendered":"\n

In this blog I’ll explain how to event listener for ajax call to custom\/section\/load<\/em>. Magento sends ajax request to custom\/section\/load<\/em> every time it loads data or perform any action with ajax request. Some examples would be Add to Cart, Update Cart Item quantity, on Checkout page, etc.<\/p>\n\n\n\n

After successful call to\u00a0custom\/section\/load<\/em>,\u00a0Magento trigger custom event “customer-data-reload”. So we can listen to this event with below code.<\/p>\n\n\n\n

$(document).on('customer-data-reload',function(e, arg){\n    console.log(arg);\n});<\/pre>\n\n\n\n
The arg <\/strong>is an array which consists the sections that were updated. Some examples would be message<\/em>, cart<\/em>, customer<\/em>, compare-products<\/em>, last-ordered-items<\/em>, wishlist<\/em>, recently_viewed_product<\/em>, checkout-fields<\/em>, etc.<\/p>\n\n\n\n
Feel free to comment if you have any query. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog I’ll explain how to event listener for ajax call to custom\/section\/load. Magento sends ajax request to custom\/section\/load every time it loads data or perform any action with ajax request. Some examples would be Add to Cart, Update Cart Item quantity, on Checkout page, etc. After successful call to\u00a0custom\/section\/load,\u00a0Magento trigger custom event “customer-data-reload”. So we can […]<\/a><\/p>\n","protected":false},"author":201,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302,1],"tags":[7940,2460],"class_list":["post-133344","post","type-post","status-publish","format-standard","hentry","category-magento2","category-uncategorized","tag-custom-section-load","tag-magento-2"],"yoast_head":"\nHow to run custom JS after ajax call to custom\/section\/load - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to run custom JS after ajax call to custom\/section\/load - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog I’ll explain how to event listener for ajax call to custom\/section\/load. Magento sends ajax request to custom\/section\/load every time it loads data or perform any action with ajax request. Some examples would be Add to Cart, Update Cart Item quantity, on Checkout page, etc. After successful call to\u00a0custom\/section\/load,\u00a0Magento trigger custom event “customer-data-reload”. So we can [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-22T10:26:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-29T12:54:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sanjay Chouhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Chouhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/\"},\"author\":{\"name\":\"Sanjay Chouhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\"},\"headline\":\"How to run custom JS after ajax call to custom\/section\/load\",\"datePublished\":\"2018-12-22T10:26:15+00:00\",\"dateModified\":\"2024-02-29T12:54:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/\"},\"wordCount\":127,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"custom\/section\/load\",\"Magento 2\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/\",\"name\":\"How to run custom JS after ajax call to custom\/section\/load - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2018-12-22T10:26:15+00:00\",\"dateModified\":\"2024-02-29T12:54:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to run custom JS after ajax call to custom\/section\/load\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\",\"name\":\"Sanjay Chouhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sanjay Chouhan\"},\"sameAs\":[\"https:\/\/www.instagram.com\/sanjaychouhansc\/\",\"https:\/\/in.linkedin.com\/in\/scchouhansanjay\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to run custom JS after ajax call to custom\/section\/load - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/","og_locale":"en_US","og_type":"article","og_title":"How to run custom JS after ajax call to custom\/section\/load - Webkul Blog","og_description":"In this blog I’ll explain how to event listener for ajax call to custom\/section\/load. Magento sends ajax request to custom\/section\/load every time it loads data or perform any action with ajax request. Some examples would be Add to Cart, Update Cart Item quantity, on Checkout page, etc. After successful call to\u00a0custom\/section\/load,\u00a0Magento trigger custom event “customer-data-reload”. So we can [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-12-22T10:26:15+00:00","article_modified_time":"2024-02-29T12:54:43+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Sanjay Chouhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjay Chouhan","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/"},"author":{"name":"Sanjay Chouhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462"},"headline":"How to run custom JS after ajax call to custom\/section\/load","datePublished":"2018-12-22T10:26:15+00:00","dateModified":"2024-02-29T12:54:43+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/"},"wordCount":127,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["custom\/section\/load","Magento 2"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/","url":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/","name":"How to run custom JS after ajax call to custom\/section\/load - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2018-12-22T10:26:15+00:00","dateModified":"2024-02-29T12:54:43+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-run-custom-js-after-ajax-call-to-custom-section-load\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to run custom JS after ajax call to custom\/section\/load"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462","name":"Sanjay Chouhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sanjay Chouhan"},"sameAs":["https:\/\/www.instagram.com\/sanjaychouhansc\/","https:\/\/in.linkedin.com\/in\/scchouhansanjay"],"url":"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/133344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/201"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=133344"}],"version-history":[{"count":4,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/133344\/revisions"}],"predecessor-version":[{"id":425389,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/133344\/revisions\/425389"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=133344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=133344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=133344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}