Preserving js lib injected html in liveview during dom patching

Phoenix Forum Questions / Help
,
1

Hi,

I’m using a slide up panel third party library GitHub - tech-systems/panes: 🎉📱 Create dynamic modals, cards, panes for your applications in few steps. One instance – Thousands solutions. Any framework and free. in my phoenix liveview app. The way it works is that during pane init, I will provide an element class where the js library will inject in some html, so

my original html will be

    <div id="pane_no_change_mobile">
      <div class="cupertino-pane">
        <div class="content">
        </div>
       </div>
    <div>

and I will init the js library with

    myPane = new CupertinoPane(
      '.cupertino-pane', // Pane container selector
      settings
    );

the javascript lib then adds some html to the dom like so



<div id="pane_no_change_mobile">
   <div class="cupertino-pane-wrapper rendered" style="display: block;">
    <div class="pane" style="transform: translateY(852px) translateZ(0px); height: 884.75px; transition: initial;">
      <div class="cupertino-pane" style="display: block; transition: opacity 300ms ease 0s; overflow: hidden; overscroll-behavior: none; height: 869.75px;">
      <div class="content">
      </div>
    </div>
  </div>
</div>

The content div will contain stuff I want to display on the pane.

The problem comes when there is content changes within the content div, liveview is going to do a dom patch and remove all the js injected htmls. In this case I cannot use phx-update=“ignore” on div “pane_no_change_mobile” as I would like my stuff within content div to be reflected

Here is a before and after dom patching diff

My question is, is there anyway to preserve the js injected html?

2

I managed to solve it by adding a js hook onBeforeElUpdated, manipulating the “to” element to include js injected htmls