Progamatically refreshing a component

Juan_Camacho_I_

30-03-2016

Hi guys, I am trying to control a custom product navigation component using checkboxes via AJAX, I already made this part work (when I click the checkboxes the values in the crx that the component is using are correctly changed), but I don't know how to refresh the component so it is showed with the right values, if I manually refresh the page (F5), I get the desired functionality, but I don't know how to refresh the page progamatically or if I can refresh only the component itself.

I hope you can help me, thank you in advance for your help.

Answers (3)

Answers (3)

larryhems

06-09-2020

If you are call the function "window.location.reload(false);" the page will immediately reloaded, all JS states will be lost and the code lines after this statement will not be executed. So it's better to set the cookie before the reload:

history.go(0);

The History interface allows manipulation of the browser session history , that is the pages visited in the tab or frame that the current page is loaded in.

There are multiple ways to refresh/reload a page with jQuery/JavaScript, some are:

  • location.href = location.href
  • location.replace(location.pathname)
  • window.location = window.location
  • window.self.window.self.window.window.location = window.location

 

kautuk_sahni

Community Manager

30-03-2016

Hi

Please have a look a this KB article:-

Link:- https://helpx.adobe.com/experience-manager/kb/RefreshPageWhenModifyDialog.html

//How to refresh a page when a component is modified

  

The cq:listeners [cq:EditListenersConfig] is used to refresh the HTML page after a certain action is performed on a component. The cq:listeners node should be located as shown:

/component-name [cq:Component] /cq:editConfig [cq:editConfig] /cq:listeners [cq:EditListenersConfig]

NOTE: Text in the "[]" is the nodetype. Text after "/" is the node name -- should be extact name except for the "component-name".

The following properties are associated with cq:listeners node are:

aftercreate afterdelete afteredit afterinsert aftermove afterremove

 

There are three possible values that can be assigned to the properties above -- either "REFRESH_SELF", "REFRESH_PARENT", "REFRESH_PAGE".

So, if you want your text component to cause a page refresh after each edit, you would create the following structure:

... /mytextcomponent [cq:Component] /cq:editConfig [cq:editConfig] /cq:listeners [cq:EditListenersConfig] - afteredit {REFRESH_PAGE}             <= property {value} mytextcomponent.jsp                          <= code

I hope this would help you.

Thanks and Regards

Kautuk Sahni