I would start with like converting the url to a url tag and ensuring that htmx is loading

might be helpful here

to just confirm you see messages in the console about turning it on

and initializing

hmm, that's really weird, any other javascript on the form that might be eating the event?

maybe you can use the

monitorEvents

trick mentioned here: https://htmx.org/docs/#debugging

AHHHH

that form tag isn't legal

it isn't even in the dom I bet

tables 🤮

Ah. Well, that makes sense. Any thoughts then on what might be the best way to make click-to-edit work within tabular data?

I think you can use

hx-include='closest tr'

on the button and then put

hx-post

directly on the button

Okay, after mucking around in this, I seem to be getting a 500 error back (which htmx was discarding, and I wasn't using the

django-htmx

middleware, which would have exposed that to me right away, totally my bad). The form successfully POSTs--I can see this in the django console, and the data is also actually updated, which I can confirm on subsequent load. So, it looks like the form is working fine.

The 500 error is a ValueError--it looks like it's trying to GET /ingredients/htmx/edit/None (where None should be a primary key, which it's not getting and thus complains). But surely I've misconfigured something then? Because the success_url should be /ingredients/htmx/display/.

Relevant views:

class Ingredients(LoginRequiredMixin, ListView):
  template_name = "inventory/ingredients.html"
  model = models.Ingredient
  extra_context = {'active_nav_pantry': "active"}

class HtmxIngredient(DetailView):
  template_name = 'htmx/ingredient.html'
  model = models.Ingredient

class UpdateIngredient(LoginRequiredMixin, UpdateView):
  template_name = "inventory/update_ingredient.html"
  model = models.Ingredient
  form_class = forms.IngredientForm
  extra_context = {'active_nav_pantry': "active"}

class HtmxUpdateIngredient(UpdateIngredient):
  template_name = 'htmx/update_ingredient.html'
  
  def get_success_url(self):
    reverse_lazy('htmx_ingredient', args=self.object.pk)

URL patterns:

path('ingredients/', views.Ingredients.as_view(), name="ingredients"),
path('ingredients/<pk>/', views.UpdateIngredient.as_view(), name="update_ingredient"),
path('ingredients/htmx/edit/<pk>', views.HtmxUpdateIngredient.as_view(), name="htmx_update_ingredient"),
path('ingredients/htmx/display/<pk>', views.HtmxIngredient.as_view(), name="htmx_ingredient"),

Again, Django noob here, so please point out if I've made some glaring mistake.

I'm pretty sure the issue lies in my

get_success_url

method

🤦‍♂️ 🙃 🤦‍♂️ 🙃 🤦‍♂️ 🙃 🤦‍♂️ 🙃 🤦‍♂️

Forgot the

return

statement in the

get_success_url

method

Thanks for humoring me, folks 😂

Thanks to @User though, pointing out that invalid form set me on the right track.

hx-include='closest tr'

worked like a charm 😙 🤌

Thx, I'll fix it!

Hello, I'm new to htmx and I'm trying to implement the sortable js library. I've got it working on the initial load of the page but after one movement of the list and after a partial is rendered sorting breaks. Any ideas? Thanks in advance!

Make sure you are properly initializing the sortable javascript, there is an example using sortable.js here: https://htmx.org/examples/sortable/

From my base.html: ''' document.body.addEventListener('htmx:configRequest', (event) => { event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}'; }) htmx.onLoad(function(content) { var sortables = content.querySelectorAll(".sortable"); for (var i = 0; i < sortables.length; i++) { var sortable = sortables[i]; new Sortable(sortable, { animation: 150, ghostClass: 'blue-background-class' }); } }) ''' From my partial: ''' {% csrf_token %} Updating... {% for event in events %} {{event.event_number}} {{event.event_name}} {% endfor %} ''' I copied the exact script from the docs. My understanding was that onLoad included loading a new partial. Is that the case?

yep, it should

does the demo work for you?

Start and end your code blocks with lines with 3 backticks - the " ` " character .

the demo works, but it doesn't render a new partial. Anytime the new partial is rendered the sorting brekas

I gonna get in on this