the hx-delete is here

he delete the data, but do not reload the list

my trigger for reload is hx-list-updated

Another approach re modals is have the hx-target the modal container, on error send back the modal content into the target, on success send an empty HttpResponse. If you need full reload you can always send back Hx-Refresh header.

but don't work

hmm, I will try this, thanks

Mmm how do you deal with removing the overlaying modal-background though when just sending back an empty response?

The modal container is just an empty div, which holds the modal overlay+modal.

Don't think that was meant for you. Maybe try changing it to

HX-Trigger-After-Settle

? Honestly unsure why it doesn't work.

but yeah, was talking of a general technique, not sure if it would work for @User

Gotcha. Well I guess it depends on how you want to model your

fragments

/

partials

(really gotta norm that term)

Like if you want to use the same modal to display multiple different forms, it might make sense to just have a modal as a div on the page itself and just fill in a

form partial

no problem, the answer gave me a idea, tried hx-refresh but do not work again

hmm.. can be a solution

guys, the error was in return from my view, thanks for help

Anyone know if adamchainz (from django-htmx) is in the discord? I put together some class based views/mixins to facilitate HTMX and I'm curious to know if there's any interest in adding them to the repo.

he is but not active I think

Just drop them. I'll start in the spirit of exchange

python
class HtmxTemplateResponseMixin(TemplateResponseMixin):

    htmx_template_name: str = None

    def get_template_names(self):
        """
        Return a list of template names to be used for the request. Must return
        a list. May not be called if render_to_response() is overridden.
        """
        super().get_template_names()

        if self.template_name is None or self.htmx_template_name is None:
            raise ImproperlyConfigured(
                "HtmxTemplateResponseMixin requires either a definition of "
                "'htmx_template_name' and 'template_name' or an "
                "implementation of 'get_template_names()'"
            )

        if self.request.htmx and not self.request.htmx.boosted:
            return [self.htmx_template_name]

        return [self.template_name]

This is similar to what I did, except the class has a

template_names

dict, where

default

key goes to the full template, and then keys for each id go to template snippets for only updating portions of the page.

Also a good idea. I just don't like coupling front- and backend that tightly

Hmm, fair enough. I also have a FormView:

class HtmxFormView(HtmxTemplateResponseMixin, FormView):
    """Extend Django's FormView for HTMX."""

    def form_invalid(self, form) -> HttpResponse:
      """Returns form template with errors."""
      if 'form' not in self.template_names:
        message = (
          "HtmxFormView requires a `form` value for `template_names`."
        )
        raise ImproperlyConfigured(message)

      response = render(
        self.request,
        template_name=self.template_names['form'],
        context=self.get_context_data(),
      )
      response['HX-Retarget'] = self.request.htmx.trigger
      return response

But in my situation all the forms are fetched by HTMX and only one form is displayed at a time.

@User ☝️

form_valid

would be need set on each view that subclasses

HtmxFormView

, since that's a bit specific

Here's my

HtmxTemplateResponseMixin

class HtmxTemplateResponseMixin(TemplateResponseMixin):
    """Extend Django's Class Based Viws for HTMX."""

    template_names = None

    def get_template_names(self) -> list:
      """Fetches proper template depending on request."""

      if self.template_names is None:
        message = (
          "HtmxTemplateResponseMixin requires either a definiton of "
          "the `template_names` dictionary or an implementation of "
          "`get_template_names()`."
        )
        raise ImproperlyConfigured(message)

      try:
        template_name = self.template_names['default']
      except KeyError:
        message = (
          "HtmxTemplateResponseMixing requires that the `template_names` "
          "dictionary have a value for `default` or an implementation of "
          "`get_template_names()`."
        )
        raise ImproperlyConfigured(message)

      if self.request.htmx:
        try:
          template_name = self.template_names[self.request.htmx.target]
        except KeyError:
          pass
      return [template_name]

This can be used to get the following CBV:

class HtmxTemplateView(HtmxTemplateResponseMixin, TemplateView):
    """Extend Django's TemplateView for HTMX."""
    pass


  class HtmxDetailView(HtmxTemplateResponseMixin, DetailView):
    """Extend Django's TemplateView for HTMX."""
    pass


  class HtmxListView(HtmxTemplateResponseMixin, ListView):
    """Extend Django's ListView for HTMX."""
    pass

I always wondered how people handle a denormalized data-structure that require multiple

forms

to edit with a single CBV when using some sort of form mixin. I know somewhat unrelated, but…

Looks good. Thanks for sharing. Always curious to see what other people are coming up with. CBVs would definitely be a good addition to

django-htmx

– though the community is somewhat emotionally split between

explicit

and

implicit

views/apis.

Will probably adapt mine to optionally take a dict as the

htmx_template_name

– quite like it actually.

I suppose I should mention that another "trick" I use is that my base template is something like this:

{% if not request.htmx %}
<head>[head stuff, meta, etc, load css]</head>
<body>
<nav> [ navbar stuff that's on every page] </nav>
<main id="content">
{% endif %}
[ content ]  
{% if not request.htmx %}
</main>
<footer> [footer info that's on every page] </footer>
{% block footer_js %}[load js libs]{% endblock %}
{% endif %}

To make responses smaller?

Well, you need to load css/js etc when the page is being accessed for the first time (let's say someone goes directly to example.com/about/), but once all that has been loaded once if you're using

hx-boost

there's no need to reload them, so yeah. (although, I suppose browsers cache css and js libs and such, but I'm not 100% on how that works).