component renders only on page refresh | Community
Skip to main content
D
Dolly
Level 3
March 30, 2022
Solved

component renders only on page refresh

  • March 30, 2022
  • 2 replies
  • 2518 views

On authoring a customized component dialog, component does not render on click of done in the dialog.

It renders fine only after reloading the page. 

What can be the possible fix?

Thanks in advance

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 JeevanRaj

Hi @dolly 

 

The component doesn't render the latest changes from the dialog unless you define a edit behaviour or refresh the page. In order to define a edit behaviour you can create a cq:EditConfigand a cq:listeners. Below is a sample xml. This will reload the page as soon as you submit a dialog so that the latest changes from the dialog are displayed. 

 

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PAGE"/>
</jcr:root>

 Please find below the adobe documentation for the same.

https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/components-basics.html?lang=en#edit-behavior

 

Thanks

2 replies

JeevanRaj
Community Advisor
JeevanRajCommunity AdvisorAccepted solution
Community Advisor
March 30, 2022

Hi @dolly 

 

The component doesn't render the latest changes from the dialog unless you define a edit behaviour or refresh the page. In order to define a edit behaviour you can create a cq:EditConfigand a cq:listeners. Below is a sample xml. This will reload the page as soon as you submit a dialog so that the latest changes from the dialog are displayed. 

 

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PAGE"/>
</jcr:root>

 Please find below the adobe documentation for the same.

https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/components-basics.html?lang=en#edit-behavior

 

Thanks

    D
    DollyAuthor
    Level 3
    March 30, 2022

    Thanks @jeevanraj . This helped.

    I tried to use 'REFRESH_SELF' instead of refreshing the whole page. But it does not seem to refresh the component.

    Please help

      JeevanRaj
      Community Advisor
      JeevanRajCommunity Advisor
      Community Advisor
      March 30, 2022

      'REFRESH_SELF' is working for me. Below is the screenshot of the config. Please cross-check whether it is configured correctly.

      Thanks

        Shubham_borole
        Community Advisor
        Shubham_boroleCommunity Advisor
        Community Advisor
        March 31, 2022

        @dolly 

        Just curious about this. What type of component is this? Is it dynamic with some logic that it needs a refresh? In general, if click of ok without a refresh, a simpler component should render directly. Do you see a console error when ok is pressed?

        If it helps someone..

        We faced a similar issue in classic ui 6.5.10 where for a simple title component itself, without refresh the component won't render in classic and was throwing a 400 error. For a fix we had to overlay some file where the ootb file was checking for selector and adding addition "." to the url resulting into a 400 request..

          D
          DollyAuthor
          Level 3
          April 7, 2022

          @shubham_borole it is a customized component with textfield, multifield, pathfield, richtext.
          On click of dialog done, I do not see any error

           

            timdunham
            timdunham
            Level 2
            March 14, 2023

            All of the suggestions are correct but clarification is needed.

            • My experience has been that "REFRESH_PAGE" is used more than it should be. Authors don't like it, its disruptive to the authoring experience and is likely unnecessary.
            • Its possible you are having an issue because "REFRESH_SELF" handles rendering the DOM only for the changed component but will not run any client-side code that might normally run on page refresh related to the component. For example if you had an image gallery; JS is likely used to initialize the component on page load to create the gallery from a list of elements.  If after page load you were to edit the content of that component to use different assets; perhaps an image-set with more or less images and save the changes the component DOM would render again but the JS would need to be explicitly called to properly re-render the gallery with the new assets.

            You can make a JS call when the component is edited. See below.

             

             

             

            <cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="function(){ // your js code goes here.. }"/>

             

             

             

            Hope this helps.

            Terms & ConditionsAccessibility statement

            Loading footer...