Inner HTML replace does not initialize x-data? #4439

globglarb · 2024-11-22T12:47:36Z

globglarb
Nov 22, 2024

Hi,

I am currently debugging an issue with HTMX and Alpine.js and building a minimal example. I replaced HTMX with a fake local AJAX call but it seems that there is an init step or similar missing.
Here is the full example:

<!doctype html>
<html>
  <head>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
      crossorigin="anonymous"
    ></script>
  </head>

  <body id="admin-body" class="">
    <style>
      .bg-red {
        background-color: red;
      }

      .bg-blue {
        background-color: blue;
      }
    </style>
    <script>
      function getElement() {
        return `<div id="dialog" x-data="{ show: true }" x-show="show">
                <div @click.outside="show = false">
                    <form id="test-form">
                        <div >
                            <div  x-data="{ input: false }" >
                                <input id="test" name="draft_name" :class="{ 'bg-blue' : input, 'bg-red': !input }">
                        </div>
                    </div>
                </form>
            </div>
        </div>`;
      }
    </script>

    <button
      type="button"
      x-data="{ fakeAJAX() { element = getElement(); console.log(element); dialogContainer = document.getElementById('admin-dialog'); dialogContainer.innerHTML = element; } }"
      @click="fakeAJAX()"
    >
      Input
    </button>

    <div id="admin-dialog"></div>
  </body>
</html>

After clicking he button the DOM is updated, but the dialog is hidden, probably because shwo is not set properly. Is there some different way of updating the innerHTML or do I have to call some Alpine method?