Thanks, still having issues with

hx-preserve

. It shouldn't matter if its being done as part of htmx load polling or anything like that?

@User Have you looked into JMAP? It's really designed to go between a mail client (such as a web browser) and a mail server, without all the cruftiness of POP, SMTP and IMAP. It's fast, open, and easy to implement. https://blog.1password.com/making-masked-email-with-jmap/

(Sorry, no more spamming)

Oo - thanks @limited-diamond-93357 I almost had it working but I’ve bumped up against some bugs in the async imap library I’m using in Python. Looks like Dovecot doesn’t support JMAP though. I might be able to switch out for something else though. I’ll have a look.

JMAP

I'm sure that's true for JavaScript packages or JavaScript-heavy apps, but I'd rather keep npm out of my Python projects which is why I love htmx. 😄 We try to avoid duplication across all of our projects, so we run an internal CDN for our own dependencies. Your option 2 is what I usually do, but htmx doesn't provide releases like most do. It's not that big of a deal, because it provides built artifacts within the dist directory of the repo, but it seems uncommon and I've wondered if I'm missing something.

Does anyone have a working example of an

hx-preserve

? Struggling to understand exactly how it works in context of swapping HTML. Everytime I swap a page with a valid

hx-preserve

element, it is reloaded.

I’m assuming you’ve got a valid ID on your preserved element? If so, do you have an example of it not working? Eg a minimal example of what you’re trying to do?

Here is the partial that I am using:

<div hx-post="/preserve_content/click" hx-trigger="every 3s">
  <p>Refresh # <%= session[:counter] %></p>
  <iframe hx-preserve='true' id='iframe1' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

I grabbed the

<iframe>

example from [the htmx website](https://htmx.org/attributes/hx-preserve/) Here is my Rails controller:

class PreserveContentController < ApplicationController
  # DEVELOPMENT PURPOSES ONLY
  skip_before_action :verify_authenticity_token

  def click
    session[:counter] = 0 unless session[:counter]

    session[:counter] += 1
    puts "counter is #{session[:counter]}" 
    render partial: 'refresh'
  end
end

I tried a simple

<div id="test" hx-preserve="true">foo</div>

that I manually change before it's replaced and that one works. I then tested the iframe example and it also didn't work for me. I am still on v1.5.0. If you are on the latest version and still doesn't work there, then this might be a bug. I also tested wrapping the iframe in a div with hx-preserve and a unique id and that also didn't work.

Anyone successful in using hx-get to load a fragment containing an Alpine component with its x-data as a function? This function would be defined in an inline script tag alongside the html fragment. Maybe I am looking at this the wrong way. Got any examples I can look at? Getting the feeling this is not supported, because Alpine expects the components to be defined when it starts, but in my case it is only defined when htmx fetches the fragment.

Ok interesting thanks let me try a non-iframe example

Ok some success. I replaced the

<iframe>

with a Bootstrap spinner which seems to work perfectly.

<div hx-post="/preserve_content/click" hx-trigger="every 3s">
  <p>Refresh # <%= session[:counter] %></p>
  <div id="my-spinner" hx-preserve="true" class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Thanks @User I could kiss you!

I am glad that worked. Although there does appear to be an issue with iframes and inputs. I tried putting an

hx-preserve

on an input I use for search so it doesn't get replaced while typing in it, and that also doesn't work.

I wonder if you wrap that iframe or input in a

div

with an

hx-preserve

?

I tried that with the iframe and it didn't work

Probably worth moving this to a GitHub issue?

Yeah

i tried it w/ iframes and it didn't work

need to investigate

I got the intro post posted; this is the series where I'll be detailing my experience migrating a Vue app to htmx. https://blog.bitbadger.solutions/2021/a-tour-of-myprayerjournal-v3/introduction.html

Hey folks - I tried searching but couldn't get to a solution for using custom events to trigger HTMX requests. I'm able to get a custom event to trigger an HTMX request ONCE but it doesn't work multiple times on the page. Has anyone had to solve something like this? I asked about it with more details in this Github Discussions page: https://github.com/bigskysoftware/htmx/discussions/692 I appreciate you guys, thanks.

Was going to reply on GT, but it's I am getting a 500 error 🤯 A couple of things. 1. Try removing the extra space between

from:

and

body

. I think it's using the space as part of the selector.

html
<div hx-get="/tickets" hx-target="this" hx-trigger="click, customEvent from:body" hx-swap="afterend">

2. You can use the htmx Javascript API to simplify the vanilla JS code:

js
htmx.trigger(htmx.find('body'),'customEvent')

or

js
htmx.trigger('body','customEvent')

Thank you @User ! Your suggestion to use htmx trigger fixed the problem! For some reason, dispatching an event though Javascript body.dispatchEvent(customEvent)only triggers an HTMX event once. Using htmx.trigger however triggers it everytime.

body = document.querySelector('body')
htmx.trigger('body','customEvent')

I published a new version of the html_form_to_dict Python library. It now supports submitting the parsed data. It supports the action+method attributes of forms and the hx-get and hx-post attributes of htmx. https://github.com/guettli/html_form_to_dict

heya folks, I was laid up over the thanksgiving holiday here in the states, but I wanted to say how thankful I am for everyone who has contributed to, evangelized and been willing to try out intercooler, htmx and hyperscript 🍻

I’d like to merge my source html node with my target, rather than swapping them. I see the various append and prepend options in hx-swap but I’m looking for a pure merge - attributes and all. Has this ever been considered? Is this just not something anyone else wants to do, or is it quite complicated to implement?

hi max, you probably want to look at the morphdom extension: https://htmx.org/extensions/morphdom-swap/