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:
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…