How to move AJAX'd content in Javascript w/ Moovweb SDK?

Question

So sometimes when working with the Moovweb SDK a client will AJAX in a content spot, but it will be in the incorrect area?

I cannot use tritium to move this content, because the area I want to move it to is inserted after page load!

Example:

<div class="where-i-want-to-move-it"></div>

<div class="content-area-i-want-it-moved-from">
  <p class="content-i-want-moved">Hi! This was ajaxed in at a later date!</p>
</div>

How can I detect that this p tag was added through AJAX when I cannot control their JS to fire a specific event or fire a different call back?

Answer 1

One option would be to listen to node changes -- see this post -- and assuming you can target the correct mutation event, move the content manually in JavaScript.

Answer 2

Our firm avoids using MutationObserver because older versions of Android and IE don't recognize it.

Instead, we have begun implementing CSS Animations. You can insert CSS into your .ts file to assign animation @keyframes to an element. We then add a JS listener to listen for "webkitAnimationStart". So now when the AJAX'd content loads, the listener is instantly triggered, and we can now manipulate the new DOM using JS.

It is an excellent trick, and is cross-browser compliant when fully implemented.