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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

elizabethp60981
Level 3
Level 3

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.

1 Accepted Solution
edubey
Correct answer by
Level 10
Level 10

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

View solution in original post

4 Replies
edubey
Correct answer by
Level 10
Level 10

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

View solution in original post

elizabethp60981
Level 3
Level 3

This resolves my problem!

Thank you very much!

elizabethp60981
Level 3
Level 3

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)