Progamatically refreshing a component

[Juan_Camacho_I_]

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.

[stevec2515680]

A component is only script,  there is no  API that will reload it. You can use web APIs to reload content. For example http://www.w3schools.com/jsref/met_loc_reload.asp. 

[edubey · Accepted solution]

Add a listener for the component in cq:editConfig

Listener name will be afteredit and value will be REFRESH_PAGE or REFRESH_SELF

Documentation: https://docs.adobe.com/docs/en/cq/5-5/developing/components/edit_config.html#cq:listeners

[kautuk_sahni]

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

[larryhems]

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