👀

Fantastic. Let's django. Maybe we can even collate useful tips here and build them up into examples for a subchapter in the htmx docs.

Anybody has a good example of using Django's Paginator for an htmx "Active Search"-like case?

Doesn't an Active Search defeats the purpose of having pages?

Well say you search for a generic term but get like 50 results, it would be nice to split this up into a handful of pages.

I've got it kind of working now by returning the pagination template in the html fragment (disclaimer: htmx newbie here).

That's what htmx is all about. HTML fragments. Not much mistery.

Slowly getting there, my htmx-aware self was born only yesterday.

I'm not so "old" in htmx myself.

if there is a standard paging widget for django, you can probably slap an hx-boost on a div around it and it will "just work"

no one is 🙂

I am looking for feedback to my naming pattern (django function based views): https://github.com/guettli/django-htmx-fun#naming-pattern

@User sounds good; personally: I'd omit

_page

as a suffix for full-page responses (treating this as a default: no suffix === full-page response, so existing codebases fit this pattern)

You could also have

_hx

cover both GET and POST, with

_hxget

and

_hxpost

forcing one or the other.

I'm also thinking about the best (sub)directory structure for everything (views, templates). I'll probably go for

/hx/

subdirectories, kind of like

/partials/

but for htmx.

Do you have related conventions for CBVs?

I started like this too. But then I realized that I have few methods returning a full page. So I changed to the explicit "_page" suffix to distinguish between normal methods and full page responsed.

I don't use CBV any more.

Any specific reasons? I myself started functional, then went more CBV, and am now doing a mix.

I started with FBV (12 years ago), then moved to CBV, but still often get confused by CBV. With htmx I write tiny methods returning small html fragments. FBV feel more convenient for me. Just my personal opinion.

the way I do it in rails is as follows:

/views/contacts/index.html.erb

- main template for the contacts controller root URL and if that has something like the active search pattern in it:

html
<h3> 
  Search Contacts 
  <span class="htmx-indicator"> 
    <img src="/img/bars.svg"/> Searching... 
   </span> 
</h3>
<input class="form-control" type="text" 
       name="search" placeholder="Begin Typing To Search Users..." 
       hx-post="/search" 
       hx-trigger="keyup changed delay:500ms" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

<table class="table">
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody id="search-results">
    </tbody>
</table>

I'll use the ID of the element I am targeting for a template name:

/views/contacts/_search_result.html.erb

i'd probably pick a different id, looking at it, like

results_table

or something, so I have a better file name

And then in the controller, the logic that handles the

/search

url would look something like this:

rb
  if request.headers['HX-Request']
    render "_search_results.html.erb" # render the partial
  else 
    render "index.html.erb" # render the whole UI w/ search results

The final trick here being that the

index.html.erb

template will include the

search_results.html.erb

template so it can be used as the template for both the root request as well as

/search

requests

not sure if that's useful for django folks, but hat's how I usually do it

Hi guys, another Django user here 🙂 I am wondering how to properly handle Django's generic UpdateView with htmx. The thing is django returns form with errors if the form sent is invalid which plays nicely, but it does return redirect on success, which then replaces the content by the redirect response. Is there a way to tell htmx to follow redirect if it arrives as a response? Thanks

htmx should automatically follow redirects: the ajax request never sees it, rather it just sees the new content

with htmx you usually do not need to do a redirect however, since the request is AJAX and therefore won't be in the browser history and cause "resubmit on refresh" issues like normal web requests

so, if there is a way to simply render the updated content after a successful save without a redirect, that should work too

A normal 302 gets evaluated by htmx like "get this snippet from the URL you find in the "location" header". If you want htmx to do full page reload you need to set the header "hx-redirect". See: https://stackoverflow.com/questions/65569673/htmx-hx-target-swap-html-vs-full-page-reload