AEM6.3 - force page refresh when change mode to preview on touch ui | Community
Skip to main content
elizabethp60981
elizabethp60981
Level 3
March 26, 2018
Solved

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

  • March 26, 2018
  • 4 replies
  • 3859 views

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.
    Best answer by edubey

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

    4 replies

    edubey
    edubeyAccepted solution
    Level 10
    March 26, 2018

    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
      elizabethp60981Author
      Level 3
      March 26, 2018

      This resolves my problem!

      Thank you very much!

      Y
      yguo
      Level 2
      May 11, 2018

      where should I place the script?

      elizabethp60981
      elizabethp60981Author
      Level 3
      May 11, 2018

      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)

      Terms & ConditionsAccessibility statement

      Loading footer...