AEM: Reloading page while switching between edit and preview mode.

It is simple to reload the page in the edit mode after adding or updating the component properties in the dialog box. It can be easily achieved by adding actions like afteredit,afterinsert under cq:EditConfig > cq:listeners. Refer the following link https://docs.adobe.com/docs/en/cq/5-6-1/developing/components.html

This post is to cover the page reload action while switching between edit  & preview mode which is not a default action in AEM 6. It is good for authoring experience that reduces lot of waiting time for loading the page every time while switching the WCM modes. But, some time it is important when we use some javascript or css that is added to the component only in the preview mode.

Add the below script to a JS file and include this in your base template html & make it available for all the other templates.

var enablePreviewRefresh = function() {
$('iframe').bind("load",function(){
    //check for a specific component which requires page reload, so that we can avoid invoking the listener for all the component.
    var $selector = $(this).contents().find('div.q-specific-component');
if($selector.length) {
$(document).on("click", ".js-editor-LayerSwitcherTrigger", function () {
location.reload();
});
}
   });
};

$(document).ready(function() {
//refresh page while shifting between Edit and Preview Mode
enablePreviewRefresh();
});

js-editor-LayerSwitcherTrigger is the class used on the mode changing buttons.  So, you can add the listeners and scripts to achieve any actions.