Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

JavaScript execution in Editing Mode

Avatar

Level 4

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 4

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 4

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