https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • w
    That's an impressive advantage, I am more struggling to handle it with vanilla js. Thanks for your support
  • w
    Hello, after some issues with implementing client side template engine I changed my Consumer to send a Django rendered template html to websocket instead JSON and it is running well. To avoid try and error can anyone give me support to implement something like hx-trigger="every 1s" equivalet for hx-ws="send"?
  • w
    This is my code
    Copy code
    <div hx-ws="connect:/game/">
                <div id="card" hx-swap="innerHTML"></div>
                 <button hx-ws="send" class="item" id="update">Start</button>
            </div>
  • m
    normal trigger syntax should work there:
    Copy code
    html
  <div hx-ws="connect:/game/">
                <div id="card" hx-swap="innerHTML"></div>
                 <button hx-ws="send" hx-trigger="every 1s" class="item" id="update">Start</button>
            </div>
  • w
    unfortunately nothing happens after adding hx-trigger="every 1s" (no websocket send) and with hx-ws="send every 1s" it only sends to websocket once.
  • s
    just following up on this. I've get the Out of Band concept now, but I'm still stuck on how to pass the value in the select field as a parameter into the GET request For instance, if I have <select name="stage" hx-get="{% url 'onboarding:' %}" hx-target="#onboarding-steps" hx-indicator=".htmx-indicator"> Option 1 how do I get option1 as a parameter into the url? or as a parameter in {% url %}? (sorry, I just not sure what I'm missing after looking at it quite a lot)
  • m
    seems like you might want an 
    hx-push-url
    in there: https://htmx.org/attributes/hx-push-url/
  • s
    sorry, would the idea be that I could try and push the option value into hx-push-url as a parameter?
  • m
    Copy code
    html
<select name="stage" 
        hx-push-url="true"
        hx-get="{% url 'onboarding:<option1>' %}" 
        hx-target="#onboarding-steps" 
        hx-indicator=".htmx-indicator">
<select value="option1">Option 1</select>
  • m
    I don't know exactly how the URLs work in your app, but this will push whatever the hx-get url is plus the value of the select into the nav bar
  • w
    using django-htmx I'm trying to set up a class based view to discern if the request is an HTMX request or now. I have some code I'd love to get feedback on. What's the best way to share it? Gist? Just paste in the comment?
  • m
    You can paste it on it, or whatever
  • w
    I'll paste here and then update Gist
  • w
    Copy code
    python
class Add(LoginRequiredMixin, CreateView):
    """
    Add a thing
    """

    form_class = AddForm
    model = Thing

    def get_template_names(self):
        if self.request.htmx:
            template_name = "appname/htmx-awesomeness.html"
        else:
            template_name = "appname/add.html"

    def form_valid(self, form):
        self.object = form.save(commit=False)
        self.object.owner = self.request.user
        self.object.save()

        messages.add_message(self.request, messages.SUCCESS,
                             'Your thing has been added!')

        return HttpResponseRedirect(self.get_success_url())

    def get_success_url(self):
        if self.request.htmx:
            return render(self.template_name,)
        else:
            return reverse('thing_detail', kwargs={'pk': self.object.id})
  • w
    Am I looking at this correctly?
  • m
    Yes, I believe so
  • m
    @User this look right? ☝️
  • i
    looks pretty close to me
  • i
    .css. people... I want to provide some feedback to the user that a value has been updated. This is nested inside the DOM as follows 
    table.tbody.tr.td
    Copy code
    <input hx-target="this" hx-swap="outerHTML" class="form-control form-control-sm" type="number"
       name="some unique name"
       value="0.00"
       step="0.5"
       hx-post="{% url 'update_forecast' %}"
       hx-trigger="change delay:1s"
       hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    I think I need to do something like this: https://htmx.org/examples/delete-row/ I'd like it to flash a green background on on the swap that fades away.
  • m
    you should be able to just render a new version of the td with the same id and a new class, and then write a CSS transition from that class and 
    .hx-swapping
    to just that class, and the transition will fire
  • m
  • w
    for class based views, any ideas on how to inject the created object (via get_success_url) into the context?
  • w
    Figured it out. Posting soon.
  • w
    Ok, so the one from earlier is wrong. `get_success_url only wants to return the reverse. So, this one seems to work:
  • w
    Copy code
    python
class AddImage(LoginRequiredMixin, CreateView):
    """
    adds a image
    """

    form_class = ImageForm
    model = Image

    def get_template_names(self):
        if self.request.htmx:
            return ["images/htmx-add.html"] # The response HTML to inject into a list
        else:
            return ["images/add.html"] # The actual form

    def form_valid(self, form):

        self.object = form.save(commit=False)
        self.object.owner = self.request.user
        self.object.save()

        messages.add_message(self.request, messages.SUCCESS,
                             'Your image has been added!')

        if self.request.htmx:
            context = {'image': self.object}
            return render(self.request, 'images/htmx-add.html', context)
        else:
            return reverse('image_detail', kwargs={'pk': self.object.id})
  • w
    I cn't for the life of me get the CSRF token into the view
  • w
    any suggestions?
  • w
    this is for a DELETE method view
  • m
    I think the django-htmx plugin should take care of that, right @high-toothbrush-44006 ?
  • w
    I can't see how. There is no where that it adds it in
1...678...100Latest