jsonform does not work when loaded with htmx

[mick88]

jsonform version 2.11.0

I use htmx on my website to show a popup dialog with a form. The popup is triggered with this button:

<a hx-get="/dashboards/edit-widget/75" hx-target="#widget-edit-popup">Edit widget</a>

And loads html dialog containing the following form template:

{% load bootstrap3 %}

{% csrf_token %}
{% bootstrap_form form layout='horizontal' %}
{{ form.media }}

This results with dialog opening correctly and containg the form, but the jsonform widget does not render. The following error is logged in console:

VM155:22 Uncaught ReferenceError: reactJsonForm is not defined
    at initJSONForm (<anonymous>:22:28)
    at <anonymous>:35:9
    at <anonymous>:37:3
    at Ge (htmx.min.js:1:17995)
    at htmx.min.js:1:18122
    at B (htmx.min.js:1:3281)
    at Ke (htmx.min.js:1:18094)
    at htmx.min.js:1:6875
    at htmx.min.js:1:32813
    at B (htmx.min.js:1:3281)

However, if I close the dialog and trigger it the second time, the jsonform widget does render.

I also tried removing dialog out of the equation and just render the form on the page, but same result. jsonform does not render the first time it is triggered.

[bhch]

In v2.11.0, the react widget is initialized in the template (see source) from a self-invoking function which automatically runs when the page loads.

So, when HTMX loads the content, the initialization function executes but since the JS files aren't loaded yet, you get this reactJsonForm is not defined error. It works second time because the scripts are already loaded.

---

I also tried removing dialog out of the equation and just render the form on the page

Same reason as above, the reason is that the initialization function is running before the scripts are loaded. Moving {{ form.media }} line above {% bootstrap_form form layout='horizontal' %} might fix it (but it's still not guaranteed). It was a bug in v2.11.0. This has been changed in v2.13.0. Now we wait for scripts to load before initializing. If you upgrade, this will be fixed. However, the dynamic loading will still not work.

---

I'll try to find a fix soon.

[bhch]

I looked into this a bit more. When HTMX dynamically loads the content, there's no event or any other way to know when the scripts will finish loading.

As a temporary fix, you can include the widget's dependencies in the initial page before loading the widget.

For v2.11.0:

<!-- CSS -->
<link rel="stylesheet" href="{% static 'django_jsonform/style.css' %}">
    
<!-- JS -->
<script src="{% static 'django_jsonform/vendor/react.production.min.js' %}"></script>
<script src="{% static 'django_jsonform/vendor/react-dom.production.min.js' %}"></script>
<script src="{% static 'django_jsonform/vendor/react-modal.min.js' %}"></script>
<script src="{% static 'django_jsonform/react-json-form.js' %}"></script>

For v2.13.0 (and above), you also have to include this script after the above scripts:

<script src="{% static 'django_jsonform/index.js' %}"></script>

---

I'll keep it open for now and see if there are any graceful ways to do this but don't expect a fix anytime soon.

[bhch]

Hi, I've released a fix in v2.15.0. Please upgrade and test it out.

And, since you're using an older version (v.2.11.0), I recommend reading release notes for v2.13.0 and v2.15.0. These two versions introduced minor breaking changes. Please check whether you're affected or not.

Thank you.