Is there a way to refresh the page whenever component drag and dropped into the layout container?

[VigneshwaranSa2]

I would like to refresh the page whenever any component drag and dropped into the layout container. I have tried through cq:listener and which custom JavaScript also but both are not working. Could you please let me know if any other ways to achieve this? Thanks

//Sample JS logic tried

(function ($, Granite) {

    "use strict";

    $(document).on("cq-editable-added", function (event, editable) {

        // Check if the component is dropped into your specific container

        if (editable && editable.type === "path/of/container") {

            console.log("Component added:", editable.type);

            // Refresh the page

            location.reload();

        }

    });

})(jQuery, Granite);

[giuseppebaglio · Accepted solution]

hi @VigneshwaranSa2, you can add a cq:listener to the component definition and also define the activating trigger.

Node cq:editConfig (file name must be _cq_editConfig in your repository):

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PAGE"/>
</jcr:root>

Please check that the definition and properties don't have any typos.

List of cq:listeners: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/com... 

You can also directly add JS code inside a listener like so:

afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"

[gangadharpotala]

You can refresh the page after a component is dropped into a layout container in two reliable ways. AEM gives flexibility to do it either via client-side authoring hooks or using component-level edit listeners.

Using Clientlib + Granite.author Events (No cq:listener needed) :

This listens to component insert actions directly inside the editor and refreshes the page automatically.

 /apps/<project>/clientlibs/editor/js/refresh-on-drop.js

(function ($document) {

    $document.on("cq-editor-loaded", function () {

        Granite.author.editablesHooks.addListener("editableAdded", function (editable) {

            console.log("Component dropped:", editable?.type);

            // Optional: restrict to specific container/component
            // if (editable?.type !== "my/components/container") return;

            location.reload(); // Refresh page
        });
    });

})(jQuery(document));

clientlib.json 

{
  "categories": ["cq.authoring"],
  "js": ["js/refresh-on-drop.js"]
}

Using cq:editConfig (No JS, Page refresh via listener) :
If you'd rather let AEM handle it natively, a simple edit listener can trigger a refresh automatically when the component is inserted.
/apps/<component>/_cq_editConfig 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:EditConfig">

    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterinsert="REFRESH_PAGE"/>
</jcr:root>

Both solutions work — choose the one that fits your use-case.

Hope this helps you.