Nvm, it's the stupid bootstrap-select library again that needs to be $('.selectpicker').selectpicker() when the options are updated.

Is there a way to prevent the flickering that happens on hx-post in my case ?

put a min-height on the different elements?

my guess would be that the initial height of the select is 0 and that the bootstrap js widget is setting one

and what you're seeing is the flicker where the swap has occured but the js hasn't set the height yet

cool, ill try that, thanks

You're hitting problems I've never seen, and I routinely use both Bootstrap 4 and 5 with HTMX. I also update options without issue. I wonder if the key difference is that I ONLY use the Bootstrap CSS. I entirely replace the bootstrap js libraries with HTMX and Hyperscript. From expanding a mobile navbar to dismissing models.

I'm sure that has something to do with it. My problems mostly stem from the bootstrap-select library and it's edge-cases.

someone shared a similar thing in the php channel so I wanted to share my csrf extension:

Hey everyone, I am new to htmx and I was wondering if I could make a form with two inputs (date & multiple choice button) and when the date is entered, it automatically makes a request to an api and gets an array from the api in json format and shows that list in the multiple choice option and then when the user clicks submit, it filters the relevant output from the same api request. I was able to hardcode both the inputs and receive the relevant output but I was wondering if I could now use to htmx to easily build this form with django. Any ideas/video recommendations on where I should start from? I am not using a model form so just a normal Django form Thanks

why return json? You could return the HTML for the multiple choice and swap it

Hey dude, basically with HTMX your backend doesn't return JSON anymore, it returns HTML.

I would recommend that you create a partial view in Django that has a for loop in it and renders elements. In your backend you should have a route that render()'s that partial when HTMX posts to it.

On initial page load you want Django to create the form and render it (like you would do normally if you weren't using HTMX). You only have to add the htmx attributes to the date field of the form 🙂

I'm on my first Django project for work so take what I said with a grain of salt. But, I did do quite a bit of digging and research into how to best use django forms with HTMX, and I tried a few options, namely django-crispy-forms and django-widget-tweaks. I found the easiest solution to be django-widget-tweaks. It allows me to create all the HTML of my form and then use a simple {% render_field %} to render the field that Django created in it's forms.

You should also have a look at the Bug Bytes youtube channel, it was really helpful to help understand HTMX with Django. He has many videos on this subject.

And if you're feeling lost it's normal, I totally felt like django forms were completely non-obvious and non-intuitive. There are so many ways to do it, which makes it difficult to get started and find good resources.

Hi, I'm using htmx on my django project https://github.com/pcampos119104/magapp and a I'm loving it, but now I have an idea to put a tag field on my model. I have a lib that give me the abstraction of a tag, tagulous My model field:

tags = tagulous.models.TagField(
        force_lowercase=True,
        null=True,
        blank=True,
        help_text="tags da receita",
        autocomplete_view="recipe_tag_autocomplete",
    )

My url conf to fetch known tags:

path(
        "partial/tag/autocomplete/",
        tagulous.views.autocomplete,
        {"tag_model": Recipe},
        name="partial_autocomplete_recipe_tag",
    ),

How can I do something like that https://larainfo.com/blogs/bootstrap-5-tags-input-examples on htmx, I'm not good at frontend Thanks in advance

This example might get you close https://htmx.org/examples/active-search/

I'd personally do it using JavaScript, maybe something like AlpineJS. Or even better, find a well documented web component that does what I want. I don't know of any off hand unfortunately. Good luck!

The JavaScript way would be a good option if the list of tags was small and didn't require checking with the backend to get the result. If you can't load all the data onto the client up front, then HTMX would be a good option IMO.

I agree w/ @mammoth-family-48524: I'd look for a component to handle the UX in this case

Anyone know how to use HTMX to update a table when another user submits a table entry

For example one user is sitting on a table page and another user somewhere else adds one to the table how does it trigger a refresh on the first users view

either server-sent events or websockets

I am going to try SSE myself soon (altho probably with Flask instead of Django) but I think these are what you need: - client side: https://dev.htmx.org/extensions/server-sent-events/ - server side: https://github.com/fanout/django-eventstream

you can also do the poor-man's solution: polling

I had to revert from SSE to polling in a simular case. I want to update a single row in the table. But opening an SSE stream per table row was just too much for the server to handle. And having a single SSE stream where you trigger a certain row only does not seem possible with the current implementation (I asked this yesterday in the #725789747212976259 channel, but no feedback so far).

thanks @mammoth-family-48524 and @mysterious-toddler-20573