Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Progamatically refreshing a component

Juan_Camacho_I_
Level 2
Level 2

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.

1 Accepted Solution
edubey
Correct answer by
Level 10
Level 10

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

View solution in original post

4 Replies
stevec2515680
Level 4
Level 4

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
Correct answer by
Level 10
Level 10

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

View solution in original post

kautuk_sahni
Community Manager
Community Manager

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
Level 1
Level 1

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