Ability to reinitialize a formset and input widgets after page has loaded?

[SamuelJennings]

Hi jrief,

I'm trying to add some some interactivity to my app using htmx to inject forms into an existing web page. I have a formset that works fine when I use it normally, however, if I inject that same form using htmx, some of the widgets (e.g. selectize, rich text, etc.) do not render properly on the page.

Not raising an issue because this is probably outside the expected use case of django-formset. But perhaps you have some ideas? Is there a way to re-initialize a formset after the page has already loaded?

Normal use (works fine):

HTMX injection after page load (not so good):

[jrief]

Hi @SSJenny90 ,
great to hear that you attempted to get django-formset up and running with HTMX. This actually is something on my TODO list because I believe that those two technologies fit well together. However, I do not have a lot of experience with HTMX. Could you please create a fork and add your code into a demo below testapp/. I then can check and look for a solution.

[SamuelJennings]

(reposting as a top level comment)

Totally agree that both technologies fit well together. Here's a demo app as requested:

https://github.com/SSJenny90/django-formset

It adds an additional HTMXFormView that shows up as "htmx" under the index view of each framework. I configured it with the OpinionForm because that was the first I found that utilized the Selectize widgets in order to demonstrate the issue. The new view should happily work with any other form as required.

If you need anything else or require more explanation, let me know.

[jrief]

It will take a little bit to implement this. Hope you're not in a hurry.

[SamuelJennings]

No great rush on my part. Take your time.

[mpclarkson]

This is a truly exceptional library @jrief... thought all my dreams had come truebut I too use HTMX extensively and it's not at all straightforward. Well done though. Great work.

[mpclarkson]

What we need is something like DjangoFormset.init to reinitialise the JS on an htmx:swap event. Then my life would be complete.

[jrief]

What should such a DjangoFormset.init(…)-function do?

I actually am more focused on using the PEG-parser to create my own triggers in analogy to the HTMX triggers. Maybe you could describe some use cases, how your project works.

I currently have a long backlog, so please be patient.

[mpclarkson]

@jrief basically I need to be able to do something like this to reinitialise django-formset when partial templates are loaded via HTMX.

htmx.onLoad(function(content) {
  enableUIElements();
});

Currently, if you load a django-formset in a modal presented using HTMX it doesn't work as the entire dom is not updated.

[SamuelJennings]

I don't normally venture far into the JS/TS world but I took a look at django-formset.ts and django-formset.monlith.ts, and noticed that all of the init logic happens directly inside a 'DOMContentLoaded' listener. Would it be possible to pull this code out into a function and then expose the function to the global window object?

Something like this:

// django-formset.ts

function initializeFormset() {
   // all initiliazation logic here
}

window.addEventListener('DOMContentLoaded', (event) => {
    intializeFormset();
}

// Attach the function to the global `window` object
window.initializeFormset = initializeFormset;

In this case, all someone needs to do in their page is recall the initializeFormset method when it suits them (e.g. inside an HTMX event listener). I'm sure there's more to it than this but maybe it gets us moving towards a solution.

[mpclarkson]

Yes, this should work 💯