AEM6.3 - force page refresh when change mode to preview on touch ui | Community
Skip to main content
elizabethp60981
elizabethp60981
Level 3
Mar 26, 2018 1:42 PM UTC
Solved

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

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    edubey
    edubeyAccepted solution
    Level 10
    Mar 26, 2018 1:52 PM UTC

    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 reply

    4 replies

    elizabethp60981
    elizabethp60981Author
    Level 3
    May 11, 2018 8:21 PM UTC

    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)

    Translate
    yguo
    Level 2
    May 11, 2018 4:44 PM UTC

    where should I place the script?

    Translate
    elizabethp60981
    elizabethp60981Author
    Level 3
    Mar 26, 2018 3:35 PM UTC

    This resolves my problem!

    Thank you very much!

    Translate
    edubey
    edubeyAccepted solution
    Level 10
    Mar 26, 2018 1:52 PM UTC

    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)));
    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...