Expand my Community achievements bar.

SOLVED

Dynamic Content in Experience Fragment along with DIV

Avatar

Level 4

Hello All - I have a dynamic component in the page. On selection of the drop down, The content needs to be refreshed/changed according to the selection. The component is basically a Multifield component with reference/path to the experience fragment Path/variation for each state. In the JCR node of the page, we capture only the experience fragment path and states, and not the actual content of the XF. I have asked for the suggestion in the other forum and I was asked to go for Ajax route. In my case, the content of experience fragment (DIV) should be replaced on the page  completely based on the user selection. The XF is stored as cq:page with node and properties and we don't have the complete DIV to replace the content. I don't think if iframe is one of the best solution to include the XF page in the iframe tag. 

 

Whenever I change the state, I have to refresh the browser to see the updated content. I am looking for ways to dynamically change the XF content based on the user selection along with complete DIV.

 

Any help in this issue is greatly appreciated.

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

What you are looking for a an SPA like behaviour on a static page. If this is going to be major customer experience in various pages, think of doing an SPA itself using SPA editor.

If this is a one time usecase, you can look for pjax based content delivery, guessing the experience you are looking for is like https://pjax.herokuapp.com/

View solution in original post

6 Replies

Avatar

Correct answer by
Employee Advisor

What you are looking for a an SPA like behaviour on a static page. If this is going to be major customer experience in various pages, think of doing an SPA itself using SPA editor.

If this is a one time usecase, you can look for pjax based content delivery, guessing the experience you are looking for is like https://pjax.herokuapp.com/

Avatar

Level 8

Yes, the XF is stored as cq:page with node and properties, but when we hit XF link via AJAX or Angular or SPA, we will get HTML response, it is more on front end work, the FED developer should read this HTML response and replace with the page content.

The XF should have a root layout container to the author content, the FED developer should identify this or you need to provide the root layout container node name to him to read the content.

Without refreshing the page, if we want to dynamically load the content then we must use either AJAX or Angular or some other framework.

Avatar

Level 4
Thanks for your inputs, Appreciate it. Do you have any sample implementation similar to this approach ?

Avatar

Level 8

Sorry, this we built for one of the client, as per policies, I cannot disclose, it is possible you can check with FED guys they will definitely help you

 

Avatar

Level 4
@raj_mandalapu - Could you please tell me how was the caching mechanism for dispatcher / CDN. implemented? How was page load performance in publish?