HX-Trigger:{"foo":{"bar":"blah"}}

should end up putting the propery

bar

on the event detail with the value

blah

Thanks, I got that. What I meant is if these vars can somehow be automatically included in the request. e.g. added to hx-vars. So if I have hx-trigger="custom" hx-get="/toggle", and I trigger the "custom" event with {"foo":"bar"}, then "foo=bar" gets aded to the variables. I don't think this is available, but I am going to explore my options with HX-Trigger.

ahhhh

yeah, we don't have that yet

but, hyperscript work strongly implies that it will be there eventually

Got it working with HX-Trigger and

Just passed 2000 stars on github:

hey folks, how do you apply styling for an when you have applied an update via

hx-get

<a hx-get="{% url 'create-comment' item.id %}" hx-target="#reply">reply</a>
<article id="reply"></article>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g==" crossorigin="anonymous"></script>
    <script>
        let quill = new Quill('//*[@id="editor"]', {
            theme: 'snow'
        });
    </script>

and i'm inserting a form when a user clicks reply just in case ya'll wondering what the form looks like - django form

class ItemForm(forms.Form):
    body = forms.CharField(label="Pintext", widget=forms.Textarea)
    image = forms.FileField(
        widget=forms.ClearableFileInput(
            attrs={"multiple": True, "data-max-files": 5, "data-max-file-size": "5MB"},
        ),
        label="Image Attachments",
        required=False,
    )
    tags = forms.CharField(max_length=200, required=False)

    body.widget.attrs.update({"id": "editor", "class": "editable"})

at the moment my quilljs styles not being applied to the form

So, your first snippet is what's on your page originally, and you're loading whatever html that second snippet returns and that's what has the editor in it right?

I believe you would have to initialize quill after you load the editor. Right now what's happening is you're trying to make quill initialize for an element that doesn't exist on the page, and loading an element after that doesn't make quill magically re-initialize itself.

You would probably want to listen for the

htmx:afterOnLoad

event, and initialize quill there.

Is there an easy way of loading something into an input's value instead of having to swap the entire element?

managed it with a small extension

@User you probably want that code in the htmx onLoad callback:

js
htmx.onLoad(function(content){
          let quill = new Quill('//*[@id="editor"]', {
            theme: 'snow'
        });
});

It would be better to find stuff in the

content

rather than doing a global search, in case Quill isn't reentrant

@User what was the usecase? I have considered an

hx-swap="attribute:value"

option in htmx, but if you replace an input (and it has a stable ID) we try to keep the caret position consistent so I figured it wasn't worth it

@User @User thanks folks. yeah pretty much I want to instantiate the editor after when I receive the html from the server

I also use other third party widgets in my django forms. e.g

class CommentForm(forms.Form):
    body = MarkdownxFormField()

& is there a way htmx can render these widgets when I do

htmx-get

because currently they're not

also would it be advisable to mix turbolinks and htmx ? if I can't get htmx to load 3rd party widgets. I had removed turbolinks earlier, since htmx has the turbolinks functionality included. only that right now, htmx is not loading scripts | css files I need when I get the page.

@User that should work if you use

htmx.onLoad

and use the content passed in to initialize the widgets. Turbolinks is much more mature than htmx and is designed to "just work" with html that is not designed for AJAX. I'm hoping to eventually match it for "just working" but as of right now I think you might have more success with using that, and maybe htmx for some smaller parts of your project.

e.g. just use htmx for an active search UX: https://htmx.org/examples/active-search/

@User aye thanks. yeah will use it incrementally. like for the parts with just static html and no other extra stuff etc. and say I say I use

hx-boost="true"

is there a way to opt on some elements ?

hx-boost is inherited, so you can use it on a parent element to give it to child elements, or set it to

false

to cancel it for a given area

> @User what was the usecase? I have considered an

hx-swap="attribute:value"

option in htmx, but if you replace an input (and it has a stable ID) we try to keep the caret position consistent so I figured it wasn't worth it @mysterious-toddler-20573 Budgeting app, user can input cost of materials or load the cost from the database. I could just return the whole element, but seemed wasteful. Also gonna need to have a "load costs for all materials" button and that would be too expensive when these budgets get a bit larger on the hundreds of materials scale.

This is what I came up with. The response is literally just the value.

htmx.defineExtension('swap-value', {
  onEvent : function(name, evt) {
    if (name == 'htmx:beforeOnLoad') {
      evt.detail.target.value = evt.detail.xhr.response;
      return false;
    }
    return true;
  },
});

@User something about htmx-sse. my server is sending sse events which are okay i.e status 200. but htmx is showing event errors in the console.

or is it htmx-sse expects the data returned from the server to be html strings ?

i think it sees the world "error" and assumes it is an error