Folks, I am documenting this here, because I don't think it is documented elsewhere... In all cases but AJAX sources, the Mockup modal pattern clones DOM elements, but if those elements contain HTML with other patterns, there may be side-effects that are not desired from cloning post-manipulated DOM (e.g. breaks select2).
Fortunately, there is a hack that patternslib gifts us: wrapping your target divs in a hidden
<pre style="display:none">
will prevent initial scanning of patterns within the DOM, allowing you to either:
- Blacklist some portion of your DOM from scanning on page load or re-scan of whole page (for whatever motive), or,
- Defer (in the case of modal) scanning until the fragment of DOM is cloned, and the clone is scanned.
Example (modal with select2):
<a href="#modalselect2"
class="btn btn-lg btn-primary pat-plone-modal"
data-pat-plone-modal="width: 500">
Open modal with Select2
</a>
<pre style="display:none">
<div id="modalselect2">
<p class="formHelp">Pick a color!</p>
<input type="text"
class="pat-select2"
data-pat-select2="separator:,;tags:Red,Yellow,Green,Orange,Purple;width:300px;"
/>
</div>
</pre>
This example will not work without the pre hack, but I think that is okay, as long as this is easily discoverable information.
This may be useful in solving the kinds of problems described here:
- http://stackoverflow.com/questions/17175534/cloned-select2-is-not-responding
- http://stackoverflow.com/questions/14483348/query-function-not-defined-for-select2-undefined-error
- https://github.com/select2/select2/issues/2522
While using this seems a bit hacky, it is something that can be used right now by developers without either painful workarounds or modification to any mockup or patternslib sources.
Note: I could add these to the mockup docs, but we need to solve the problem described in this prior thread first.
Sean