Modal has not been initialized error

[anjanesh]

<button
    data-modal-target="initialize-modal-{{ cloud_provider }}"
    data-modal-toggle="initialize-modal-{{ cloud_provider }}"
    type="button"
>
  Initialize
</button>

{% include "./modals/initialize-aws.html" %}
{% include "./modals/initialize-azure.html" %}

which has <div id="initialize-modal-azure"> in the modal (/modals/initialize-azure.html).

If cloud_provider is not azure then initialize-azure.html will still be included and I get the error :

Modal with id initialize-modal-azure has not been initialized. Please initialize it using the data-modal-target attribute.

[Behram-Khattak]

@anjanesh Hi, i am also facing is issue in tailwind css modal. If you find any solution please share.

[anjanesh]

Not yet.

[mustafaalharethi]

Same problem. The issue stems from the fact that the button component loads after the JS files have finished loading. As a result, the data-modal-target/toggle="[id]" attribute is not recognized.
->> Confirm that the button component is defined before the JavaScript files finish loading.

[r4cker]

I have the same probleme. I didn't need the html button since I control the modal from JS. So I added the button before the modal and add hidden class to it.