A strange way to break the Guided LP Editor

Sanford Whiteman -

I occasionally go to extremes with the Marketo UI, hacking the Guided LP Editor itself. Crazy moves like that can accidentally break UI features, but that's to be expected.

Yet this week I was working on a vanilla-ish template for a client — no UI customizations to speak of — and a QA tester reported the LP Editor's auto-refresh had broken. LPs worked once approved, it was just the editing experience that was off.

This was weird. We assume changes to LP Variables (and, at least most of the time, to Elements) cause the live “pre-preview” to cross-fade with the new info:

Refresh has been iffy for me in the past (sometimes I need to reload the page after working for awhile) but here it just did not work at all.

Of course that meant something I considered vanilla must've not been so vanilla after all!

I started looking at the little bit of JS on the template and found the offending code after a bit of trial and error.

This function trimmed down the DOM by completely removing unassigned mktoImg elements (elements that don't have an image chosen in the LP Editor):

.filter(function(category){
  return category.imgEl.isPlaceholder();
})
.forEach(function(category){                
  category.imgEl.parentNode.removeChild(category.imgEl);
});

Calling removeChild to clip placeholder elements out of the DOM broke auto-refresh in the Editor.

Not too strange, I suppose, since the Editor wants to swap images immediately (not just after refresh) and barfed when it couldn't find one of the placeholders (even if that particular placeholder didn't need to be swapped). But unexpected, since I didn't think I'd been pushing the limits of the UI this time.☺

So instead of completely removing unassigned elements — which would've been far better for CSS styling, but alas — there's now a <div> at the end of the <body>:

<div id="scratches" style="display:none;"></div>

Elements are moved into there instead of removing them completely from the document:

.forEach(function(category){                
  scratchEl.appendChild(category.imgEl);
});

At least there's a workaround. The more you know, etc..