To be honest I had been a bit lazy. In all the conversations I had had on the subject of editing AJAX loaded content with Experience Manager I had been told it could not be done, so I didn’t even try. Until Jaime told me it was possible and I found out that its not even difficult.
The procedure is this:
1. Remove the XPM bootstrap script tag from the output rendered server side:
<script type="text/javascript" language="javascript" defer="defer" src="http://mycms/WebUI/Editors/SiteEdit/Views/Bootstrap/Bootstrap.aspx?mode=js" id="tridion.siteedit"></script>
2. Add a callback in your client side code to dynamically add this script element after your dynamic content has been fully loaded
For example (using JQuery):
Hey presto – you will notice that the XPM breadcrumb, and overlays for the Page, Component Presentations, Fields, SmartTarget regions etc. are now shown only after the page content is fully loaded client side, and are fully functional.
Obviously the code above is a simple example. If you have multiple areas on the page filled with client side loaded content then you are going to have to code up a framework for marshaling all those calls and ensuring startXpm is called once, and only after everything has finished loading.
Note also that this works well if the clientside loaded content loads just after the page has loaded, it probably won’t work in situations where content is updated based on user interactions in the page. I guess what is really needed in this situation is the ability to trigger an XPM ‘repaint’ from within the JS code in your page – hopefully that is on the product roadmap for future releases.
Thanks Jaime for giving me the impetus to take a look at it. Given how easy it is, I am sure I am not the first to find it out, but I couldn’t for the life of me find any examples out there in the wild…
Hello,
Thanks for this tip. We are trying achieve something very similar. In our care HTML is a part of JSON. I would like to understand what would be the right event to remove
XPM bootstrap script tag. As if I remove it and add tag dynamically I see two XPM icons. Should I remove it immediately after the page load.
If you want to delay load XPM, then you shouldn’t have the script tag in the rendered page HTML at all until your dynamic content is fully loaded. If you leave it in, and then remove it with Javascript then it will probably be too late – the bootstrap will be executed, and then when you add it again, it will execute again – hence the 2 icons.