AEM6.3 - force page refresh when change mode to preview on touch ui

[elizabethp60981]

Hi,

Each component dragged and dropped on my page goes inside a bootstrap collapsable, so I have to refresh the page to update the scripts.

Is there a way to force page refresh when the user goes to preview mode?

I was seeing some similar problems with solutions to classic UI, but I couldn't find nothing that applies to touch UI.

Is there a way?

Thank you in advance.

[edubey · Accepted solution]

Unfortunately product does have such thing yet. but you can use below script to achieve this

(function ($, $document) {
    // Adding action on layer
    $document.on('cq-layer-activated', refreshPage);
    function refreshPage(ev) {
        try {
            // Get edit mode page iframe reference
            var iframe = document.getElementById('ContentFrame');
            var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
            // Refresh only if both layers are different and they are either 'Preview' or 'Edit'
            if ((ev.prevLayer === "Preview" && ev.layer === "Edit") || (ev.prevLayer === "Edit" && ev.layer === "Preview")) {
                window.location.reload();
            }
        } catch (e) {
            console.log("Error occurred while refreshing the page");
        }
    }
}(jQuery, jQuery(document)));

[elizabethp60981]

This resolves my problem!

Thank you very much!

[yingyingg475361]

where should I place the script?

[elizabethp60981]

You should place the script on the clientlibs of the page that you use to overlay the wcm/foundation/components/page (the page that you have this path as sling:resourceSuperType)