please

i don't want to learn to draw properly

Is it a good idea to build a multiselect search that queries the db for results in HTMX/Alpine? I'm having a hard time building this in a good way because I need to preserve the state of what has already been selected

(Pretend the reference picture has a search bar 🙂

Picture is blank for me

Here is a better picture. The o is the search field

I think best would be -- send all the selected ones (selected_items_list) to the Backend and then when you render the list I don't know what language you use for Backend so.. here is generic example

for each ( db_results as db_result ) 
    if (db_result.name is in selected_items_list) 
       display checkmark + db_result.name
    else 
       display empty checkmark + db_result.name

are you handling injection attacks?

Thanks for taking some time to help. The backend part makes sense. I was struggling with storing the tags that were already selected on the frontend. I'm going to see if I can put the hx-vals of the tags that are already selected into each search result. Then I can update the lower div content when a search result is clicked

All user input goes through html entity escaping upon input, and again before it hits the database, so doing it again would be a 3rd sanity check, lol. Not necessary.

by the way you can make a POST/GET request with a list of values... like so:

<input type="checkbox" name="animal[]" value="Cat" />
<input type="checkbox" name="animal[]" value="Dog" />
<input type="checkbox" name="animal[]" value="Bear" />

and hx-include the whole

<form>

note the name is the same and ends with

[]

like

animal[]

on the backend you will receive this as a list in a single "property"/"variable". in php that would be something like

$_POST['animal']

I can imagine Node.js/Express would be

req.body.animal

(again, an array of animal names) etc.

personally I feel like escaping on the way in is the only way to be sure there wont be some exploit on some other tool/app using that database that doesn't happen to be using jinja. Imagine getting data through an API or something that isn't escaping it, and just assumes the data is clean.

escaping should happen at the time of presentation, because different contexts need different escaping

storing html entities in your database is not a good idea

Look at it the other way around: You can always un-escape HTML entities back to their normal form for code input boxes and stuff.

who knows where your data is going to end up with everything using electron nowadays.. would be awesome if everyone was 100% pro-active about security, but lol.

devs putting API output directly into the DOM = a tale as old as time.

couldn't be me

i won't so much as put two divs next to each other without a template system

Gimme productions example from Alpine X HTMx, 🙏 please

I am fecthing a json file using htmx. I want to use the array in the json and create a dropdown using alpine. Is there a quick example I can see?

Maybe BugBytes YouTube channel. He has 5-10 videos where he uses both HTMX and Alpine

Thanks, will check it out. Just realized that HTMX is meant to replace page elements/DOM. Not certain if it will interoperate with AlpineJS (e.g. work with x-data).

You can have your backend return html that has alpine code in it and it should "just work". This assumes you can change your endoint to return html instead of json

Just checked, we did add this:

// activates any alpine directives in new content loaded by htmx
    htmx.onLoad((elt) => {
        Alpine.initTree(elt)
    })

in our

window.addEventListener("load", function() {

so that alpine processes any new html loaded from htmx

hello, I'm having some issues listening to the htmx:pushedIntoHistory event. It works with document.addEventListener but when I do

@htmx:pushedIntoHistory.document="doSomething()"

it seems to ignore it. Maybe alpine gets confused by the : in the eventname? Any way around this?

is there a way to send a alpine variable with HTMX requests?

right now i just x-model the alpine var to a hidden input and then hx-include that input

Was curious to see if I could come up with something and this worked:

html
x-data="{foo: 'bar'}"
x-bind:hx-vals="JSON.stringify({'foo': foo})"

I put that directly on a button and

foo=bar

is included in the request payload.

Late to the party, but just in case: Attributes are case-insensitive in Alpine, so you have to do something like this

@htmx:pushed-into-history.camel

https://alpinejs.dev/directives/on#camel