Combining django-jsonform with HTMX and CrispyForms resulting in removed interactivity after submit

74 views Asked by At

I am using django to create a form that uses a JSONForm field from the django-jsonform package. I am using HTMX for asyncronous submission of the form and render_crispy_form for rendering the form back after it has been submitted.

However, after submitting the form, the things inside the JSONForm are not shown anymore and the interactivity is removed for the django-jsonform field part.

Here is my model:

class GroceryStore(models.Model): 

    PRODUCTS_SCHEMA = {
        "type": "array", 
        "items": {
            "type": "object", 
            "properties": {
                "name": {"type": "string"}, 
                "price": {"type": "number"}, 
            },
            "required": ["name", "price"],
        }
    }

    creator = models.OneToOneField(User, on_delete = models.CASCADE)

    name = models.CharField(max_length = 200)


    products = JSONField(schema = PRODUCTS_SCHEMA, null = True, blank = True, default = None)

The data is saved when valid data is submitted, the problem is just that it does not reflect it on the frontend. I am using this for generating the html to replace the form using HTMX:

form_html = render_crispy_form(grocery_form)
return HttpResponse(form_html)

It says in the documentation that HTMX is supported. What could be the problem? When reloading the page normally instead, the data and interactivity is back.

Edit: I can confirm that the target for the HTMX is since a form element is sent back as a response, replacing the original. The problem seems to be that the react that builds the interactive components does not run properly when initiating the form after an hx-swap contrary to on document load.

0

There are 0 answers