https://htmx.org logo
Join DiscordCommunities
Powered by
# 🔥-django-htmx
  • a
    the result is currently the same
  • b
    you can create a context (dict) and put the variables in it that the partial will need, such as the bookmark_count. Then when you return render, do 
    return render(request, 'booqmarqed_area.html', context)
  • b
    inside that html partial, pull the variable back out and display it
  • a
    Thanks for the response. I have tried several approaches so far including a context variable too such as
    Copy code
    HttpResponse(render(request, 'partials/boomarqed_area.html', context={'list':instance}))
    The button click seems to work but now does not change until I manually reload the page
  • a
    I have a feeling the problem is in the front end. where my template looks like this:
    Copy code
    {% load static %}

<ul hx-target="this" hx-swap="outerHTML" id="booqmarqedarea" role="group" aria-label="Basic example">
    <li >booqmarqed {{list.bookmarked.count }} times</li>
    <button hx-post="{% url 'booqmarqs:booqmarq_list' list.id %}" 
    id="booqmarq-button">
      {% if request.user in list.bookmarked.all %}
        <img src="{% static 'images/booqmarqed.png' %}" width="auto" height="20px">
      {% else %}
        <img src="{% static 'images/booqmarq.png' %}" width="auto" height="20px">
      {% endif %}
    </button>
</ul>
  • b
    so I've only been using htmx for about a week now, so I may be wrong but you've got hx-target="this" and hx-swap="outerHTML" on the ul but the actual hx-post is on the button. I think you want to have the hx-swap and hx-target on the button, and the target should be the ul (assuming you're replacing that whole partial
  • v
    I believe you're right. They'll want to hx-target the 's id from the button, I suspect.
  • a
    Thanks for the reponse guys. I made the suggested changes and I am seeing the same outcome. The function call works... but I have to refresh the page to see the update
  • a
    Copy code
    <ul class="list-group list-group-horizontal btn-group" id="booqmarqedarea" role="group">
    <li class="list-group-item">booqmarqed {{list.bookmarked.count }} times</li>
    <button class="btn btn-outline-secondary" hx-post="{% url 'booqmarqs:booqmarq_list' list.id %}" 
    id="booqmarq-button" hx-target="#booqmarqedarea" hx-swap="outerHTML">
      {% if request.user in list.bookmarked.all %}
        <img src="{% static 'images/booqmarqed.png' %}" width="auto" height="20px">
      {% else %}
        <img src="{% static 'images/booqmarq.png' %}" width="auto" height="20px">
      {% endif %}
    </button>
</ul>
  • a
    I've also tried different variations of returning a response back to the template from the view: 1. 
    return render( request, 'booqmarqs/partials/boomarqed_area.html', context={'list':instance})
    2. 
    return HttpResponse(render( request, 'booqmarqs/partials/boomarqed_area.html', context={'list':instance}))
    3. 
    return HttpResponse( request, 'booqmarqs/partials/boomarqed_area.html', context={'list':instance})
    All the same
  • g
    You could use the devtools "Network" tab to check what the response includes
  • b
    I've kinda lost track of what it is you're doing. Like I get that you've got some bookmark thing and it has a counter. Beyond that I don't know. It sounds like you are maybe bookmarking things on another area of the page and are expecting this to update? If thats the case it's not going to update because the default trigger for a button is a click. In order for that post request to fire off, you'll need to click that button. Can you explain a bit more about what you expect to happen?
  • u
    Hi, i want to pass the value from select menu when it changes to an attribute of a DIV: {% for account in accounts %} {{ account.name }} | ${{ account.balance}} {% endfor %} And the target DIV its like this:
  • a
    The idea behind it is that I want people to be able to bookmark a post made by another user. The logic of saving a post is all working. The issue here is that the reload doesn't seem to be working. You mentioned that the trigger for a button is a click. I had removed that because I was told that it would be redundant for button since the purpose of button is clicking 😃. I'll try that today
  • v
    Just leave hx-trigger=“click” - that’s explicit and unambiguous 🙂 and it’s exactly how it is demonstrated in the first htmx docs page. Also, try just returning Httpresppnse(‘1’) or something. And verify you get a response on the dev tools network tab.
  • v
    It could be logic in the view never hitting the return statement? Where is ‘instance’ in the view function defined? Are you using cbv’s?
  • a
    OK got it working. And honestly so embarrassed 😅. I had spelled the template wrong in the view. But I never would have seen it without the advice here from @User . Thank you so much to all the advice from @User @User too. I will write this up as a gist on GitHub for others that want to replicate a similar idea.
  • v
    No worries, happens to everyone occasionally, glad you figured it out \:D
  • h
    I have a form + a create view. I have hx-boosted applied to the body. When the form is submitted with an error, I swap out the form for the validated one correctly. When the form is submitted correctly, what are people doing to correctly go to the new page?
  • h
    right now I have
  • h
    form:
    Copy code
    <form
  {% if anime.slug %}hx-post="{% url "anime-update" slug=anime.slug %}"
  {% else %} hx-post="{% url "anime-create" %}"
  {% endif %}
  hx-swap="outerHTML" hx-indicator=".htmx-indicator" hx-push-url="false">
{{form.as_p}}
  <input type="submit" value="Update Anime">
</form>
  • h
    view:
    Copy code
    class AnimeWrite(UpdateView, HtmxTemplateResponseMixin):
    template_name = "home/anime_update.html"
    htmx_template_name = "home/partials/anime_form.html"
    model = Anime
    form_class = AnimeForm

    def get_object(self):
        self.anime = get_object_or_None(Anime, slug=self.kwargs.get("slug"))
        return self.anime or Anime()

    def form_valid(self, form):
        """If the form is valid, save the associated model."""
        self.object = form.save()
        return HttpResponseClientRedirect(self.get_success_url())
  • h
    that works - the form is valid, and the response comes back with the HX-Redirect header and that forces the page to a new location and updates the url
  • h
    is that the idomatic way to do that though?
  • m
    not a djangonaut, but the way I have done this in rails is by returning the detail page for the newly created entity and then using 
    HX-Push
    to push the URL for that view into history
  • h
    I thought about that but got stuck on the difference between a failed form submit where hx-swap outer html is correct, and a valid form submit that should replace the body
  • h
    Is there a way to handle that?
  • m
    you could do an oob swap
  • m
    I want to add a 
    HX-Retarget
    response header, which would be useful in this case
  • h
    I thought about the oob swap and I thought it might be intersting to say like
1...161718...100Latest