Progamatically refreshing a component | Community
Skip to main content
Juan_Camacho_I_
Juan_Camacho_I_
Level 2
March 30, 2016
Solved

Progamatically refreshing a component

  • March 30, 2016
  • 4 replies
  • 5019 views

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.

    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

    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

    4 replies

    S
    stevec2515680
    Level 4
    March 30, 2016

    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
    edubeyAccepted solution
    Level 10
    March 30, 2016

    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
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    March 31, 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

    Kautuk Sahni
    L
    larryhems
    September 7, 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

     

      Terms & ConditionsAccessibility statement

      Loading footer...