https://htmx.org logo
Powered by
# htmx-general
  • m
    I guess the same persistence could be achieved with something like litestream as well..
  • m
  • p
    Oh ty, that sounds exactly like the information I needed. Will try later!
  • m
    @User is it not possible to boost items inside a hx-trigger="revealed hx-swap="afterend" element?
  • m
    it should be
  • m
    if it isn't, that's a bug
  • m
    I have this infinite scroll.. and when a boosted items are clicked the whole new page gets added underneath the whole page..
  • m
    Copy code
    python
def list_detail(request, slug):
    list = get_object_or_404(List.objects.all(), slug=slug)
    recommendations = ListRecommendation.objects.filter(list=list).select_related(
            'created_by',
        ).prefetch_related(
            'agrees',
            'disagrees',
            'product__software_categories',
            'product__software_licenses',
            'product__software_platforms',
            'product__software_pricings',
            'product__images',
        ).order_by(
            '-score'
        )

    paginator = Paginator(recommendations, 1)
    page_number = request.GET.get('page')
    paginated_items = paginator.get_page(page_number)

    if request.headers.get('HX-Trigger') == 'infinite-scroll-list-recommendations':
        template = "_recommendation_list.html"
    else:
        template = "list-detail.html"

    return render(request, template, {
        'list': list, 
        'recommendations': paginated_items, 
    })
  • m
    Copy code
    python

{% if recommendations.has_next %}
<div id="infinite-scroll-list-recommendations"
    hx-get="{% url 'list-detail' slug=list.slug %}?page={{recommendations.next_page_number }}"
    hx-trigger="revealed"
    hx-swap="afterend">
    {% for recommendation in recommendations %}
        {% include '_recommendation.html' %}
        {% if forloop.counter|divisibleby:"5" %}
            <div class="box">
                <div class="w-full bg-gray-200 h-32">
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>
{% else %}
<div>
    {% for recommendation in recommendations %}
        {% include '_recommendation.html' %}
        {% if forloop.counter|divisibleby:"5" %}
            <div class="box">
                <div class="w-full bg-gray-200 h-32">
                </div>
            </div>
        {% endif %}
    {% empty %}
        <div class="box">
            <p class="text-xl">
                No recommendation was found..
            </p>
        </div>
    {% endfor %}
</div>
{% endif %}
    -> _recommendation_list.html
  • m
    the _recommendation.html template then contains the element with a hx-boost="true"
  • m
    Maybe the parent 
    hx-target
    is overriding the links?
  • m
    most attributes are inherited, and you can override the target of boosted links in this way (i think 😑 )
  • m
    okey.. I will just make a simpler example for my self and get to the bottom of it.. just added the boost="true" now and saw that it wasn't working properly.
  • m
    sry for pasting a lot of code in your face
  • m
    no prob
  • m
    I have a feeling if you wrap the links w/ a 
    hx-target='body'
    things might work properly again
  • m
    attribute inheritance is great until it isn't 😑
  • m
    awesome, will try that!
  • s
    A lot of doc pages end with "hx-... is inherited". Is there already a canonical URL where I can find more details about what "inherited" means in the context of htmx?
  • m
    @User this is not a bug, I am the bug 🙂
  • m
    @User not sure if there is one. When I search for the word "inherited" I get zero results.. Yet I see that individual pages contains the word a lot. I think the usability of the documentation would be greatly increased if the search function was applied site-wide.
  • s
    I volunteer to do the boring task to create hyperlinks to the canonical URL in all pages, as soon as there is one.
  • m
    when thinking about it does it even deserve another page, isn't it pretty self explanatory?
  • m
    "hx-confirm is inherited and can be placed on a parent element"
  • m
    @User I see what you say though... some pages just say "hx-disable is inherited"
  • s
    A own page is not needed. It could be https://example.com/...#inheritance But an own URL would be nice.
  • s
    Is there a way to specify the event-handler (like htmx:afterSwap) inline (LoB-way). Maybe like 
    <form hx-post="..." onAfterSwap="..."
    ? I know this works with hyperscript. But up to now I am happy with htmx and JS.
  • m
    You are gonna have to use something like alpine or hyperscript to get the LoB you desire
  • b
    How do I focus any element on response from server??
  • n
    i believe you would have to listen to the ‘htmx:afterRequest’ from JS and when triggered focus the desired element
1...295296297...1146Latest