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]

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); }"