https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • m
    Ok. We’ll wait for Adam to chime in but in general there are two approaches: one is to use the htmx:configRequest event to add the header another is to use the hx-headers attribute to add it
  • w
    hmm
  • w
    Yeah, I've tried both of those approaches, but it's not working properly.
  • m
    Can you post your code?
  • b
    hi @User, is placing the 
    htmx:configRequest
    in the base.html an option? Matt Layman's guide here was helpful to me https://www.mattlayman.com/blog/2021/how-to-htmx-django/
  • w
    Yeah, I've already done that. So weird. I'll post the code for the view that is causing the problem.
  • w
    Copy code
    python
class ImageDelete(LoginRequiredMixin, BaseDetailView):
    http_method_names = ["delete"]
    
    def get_object(self):
        return get_object_or_404(Image, owner=self.request.user, id=self.kwargs["image_pk"])

    def delete(self, request, *args, **kwargs):
        self.object = self.get_object()
        self.object.delete()
        response = redirect(reverse('item_detail', kwargs={'pk': self.kwargs['pk']}))
        response.status_code = 303
        return response
  • w
    The goal is that I can call hx-delete instead of hx-post and then remove the image from a list.
  • w
    I've tried it with post as well. I've switch between using a form with CSRF in it, adding it as a header and the SCRIPT inclusion. Nothing seems to work.
  • m
    Can you see the request in the browser console and confirm the right value or header is being submitted?
  • w
    Yes. I can see the token is in the request header
  • w
    Yeah, the JS insertion of the token seems to be working perfectly.
  • m
    Ok so this is more of a django question then
  • w
    Yeah, I think the issue is that the DELETE and a class based view. Rewrote it as a method and wrks liek a charm
  • w
    Thanks for putting your brain power on it
  • c
    Hi Dave, just out of curiousity, how is it not working as the CBV? Assume you're getting a CSRF token missing error then? Or something else? Is an interesting puzzle; will try to reproduce and see what's going on
  • c
    Hmm tried to replicate, used an exact copy paste of your 
    ImageDelete
    above and seems to work fine on my side 😕 😮 (Using Matt Leyman's method of putting csrf in the request headers)
  • w
    Copy code
    <form action="." hx-ws="send">
        <input type="number" name="input">
        <button hx-ws="submit">Submit</button>
</form>
    is there a way to clear input field after submit via htmx tag?
  • m
    hmmm, you are using web sockets and I just looked and there isn't a good event to hook into when a send occurs
  • m
    I will try to fix that in the next release (hopefully this week)
  • w
    Yeah, I've got it working now. The issue that I'm running up against is the custom DELETE. Post does work.
  • b
    When I use 
    hx-delete
    to delete a row by passing 
    hx-target="closest tr"
    (default example on the HTMX website) and I send back a 
    JsonResponse({"success": "row deleted"})
    from the view, is there a way to get the JSON data to display somewhere else instead of replacing the space (row) just deleted by HTMX? In jQuery, I typically do something like this 
    $("#displayDiv").empty().append(done).fadeIn().delay(3000).fadeOut(1000);
    inside success callback function after each successful delete operation.
  • m
    There is a delete row example that shows how to accomplish this : https://htmx.org/examples/delete-row/
  • i
    I ran into a little thing today. I generate an input tag inside of the 
    td
    tag. This is great because I can submit individual forms corresponding to a row and column index without submitting an entire row at one time. The problem is that the HTML snippet that is returned has a different CSRF tag once the form is submitted. How do I return a code snippet with the same CSRF tag? I'm thinking of using this little script to do that for me instead of doing it using the Django template. https://justdjango.com/blog/dynamic-forms-in-django-htmx#create-a-base-html-file
    Copy code
    <script>
      document.body.addEventListener('htmx:configRequest', (event) => {
        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
      })
    </script>
  • i
    I can confirm, that using this script to insert the CSRF token works very well in my case. Having a fragment that is replaced in the DOM including the CSRF token in the html fragment generates a new CSRF token and subsequently fails with a 500 error
  • i
    When I refresh a page (F5), I seem to be losing the history. When I click the back button, the previous page's url show up, but the page does not load. I am using the hx-push-url. Forward/back navigation work fine without refreshing. How can I trouble shoot?
  • m
    Sounds like it may potentially be losing its restoration target element
  • m
    if you are willing to use the uncompressed version of htmx, you can set a breakpoint here: https://github.com/bigskysoftware/htmx/blob/f4c63bc8589b8037ad7f5c243b12939cfaa393ec/src/htmx.js#L1686
  • m
    and step through the history restoration process
  • m
    if there's a bug, I'll try to fix it 🙂
1...789...100Latest