Dynamic Content in Experience Fragment along with DIV

[s1101v]

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.

[Nirmal_Jose · Accepted solution]

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/

[raj_mandalapu]

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.

[s1101v]

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

[raj_mandalapu]

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

[s1101v]

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

[kautuk_sahni]

@raj_mandalapu great response.