Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

JavaScript execution in Editing Mode

Avatar

Level 5

I have a component which initializes some Javascript on page load.

 

Whenever I edit this component, I want to re-run the initialization logic.  Is there an event I can tap into to know that the user has recently edited this component and it needs to be re-rendered on screen?

 

Maybe I can force the component's dialog on-save to always refresh the window or something?

6 Replies

Avatar

Community Advisor

Hi @dylanmccurry 

 

Use dialog-close event to add the logic that you want to perform after component edit

$document.on("dialog-closed", function() {
//do something
});

Hope it helps!

Thanks,
Kiran Vedantam

 

Avatar

Level 5

I added something like this to my main.js:

 

document.addEventListener('dialog-closed', function(ev) {
   // this is never triggered...
});

 

but it's never triggered while in editing mode.  How can my application's JavaScript know that it's in editing mode and that the user may be interacting with and reloading component properties?

Avatar

Community Advisor

try this if it works -

onSave: function() {
  this.inherited(arguments);
  window.location.reload();
}

Avatar

Community Advisor

You can try below options -

$(document).on("Granite.author.reloaded", function() {
// Reinitialize JavaScript code
});

OR
onSave: function() {

window.location.reload();
}

Avatar

Level 5

Hi Nitin,

 

That one doesn't work either unfortunately

 

I am trying to trigger this from my client script's main.js:

 

document.addEventListener('DOMContentLoaded', LoadReactComponents); // triggered
document.addEventListener('dialog-closed', LoadReactComponents); // not triggered
document.addEventListener('Granite.author.reloaded', LoadReactComponents); // not triggered
document.addEventListener('cq-editables-updated', LoadReactComponents); // not triggered
document.addEventListener('cq-contentframe-layout-change', LoadReactComponents); // not triggered