JavaScript execution in Editing Mode

[dylanmccurry]

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?

[Kiran_Vedantam]

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

[dylanmccurry]

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?

[Nitin_laad]

try this if it works -

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

[dylanmccurry]

Where would that go?

[Nitin_laad]

You can try below options -

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

OR
onSave: function() {

window.location.reload();
}

[dylanmccurry]

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