Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swapping via SSE not working when the content has the same id

See original GitHub issue

I assumed the smooth transition HTMX does would also work for SSE. So I made a minimal page with a simple, absolutely-positioned div that gets replaced via an SSE. That works fine when the div doesn’t have an id - and falls apart completely as soon as it does. With the id attribute, the content will never get swapped. Minimal webpage showing it does not work:

<html><body>
<div>
<script src="https://unpkg.com/htmx.org@1.0.2"></script>
<div hx-sse="connect:/sse swap:demo">
<div id="anidemo" style="position: absolute; top: 50px; left: 50px;">X</div></div></div></body></html>

SSE body:

<div id="anidemo" style="position: absolute; top: 500px; left: 500px;">X</div>

Removing the id="anidemo" from both will make it work (but, obviously, without transition). Tested in Firefox 84.0.

Issue Analytics

State:
Created 3 years ago
Comments:9 (1 by maintainers)

Top GitHub Comments

1reaction

benpatecommented, Jan 3, 2021

@1cg – there is something funny going on. Here’s what I’m seeing. If I include the id attribute in both the original HTML or in the SSE message, then some parts don’t seem to be swapped correctly. The innerHTML still changes for me with each message, but the style and class of the node do not. This means (using @zilti 's code above) that the DIV stays pinned to top:50, left:50, instead of moving to top:500, left:500 as it seems like it should.

I think there’s some deep magic happening in the selectAndSwap function that I’m afraid to dig into. Could you please take a look?

0reactions

benpatecommented, May 15, 2021

Hey @zilti – sorry I’ve been slow getting back to you on this. I just ran a quick test using my SSE placeholder demo app, and everything is working correctly for me.

I’m pretty sure nothing has changed with this set of code for a while, so if something IS broken, it’s likely because of something new that was introduced in 1.3.3. Here’s the diff on the source code between 1.3.2 and 1.3.3. It doesn’t look like anything relative to SSE or swapping has been touched.

Are you able to provide some demo code, or any error messages? This might be tough to track down otherwise.

Top Results From Across the Web

Htmx, Sse and real time dom swap help. - ProcessWire

Hello all! A client asked us to implement a landing page where some content would have to swap in real time when needed....

Replacing values for multiple different elements each time I ...

I'm trying to poll the server once every 5 seconds and update 3 different values on the page, all in different locations. I've...

Using SSE Instead Of WebSockets For Unidirectional Data ...

AJAX calls work on the HTTP protocol meaning requests to the same domain should get multiplexed by default. However, we hit multiple issues...

Subscriptions in Apollo Server - Apollo GraphQL Docs

Apollo Server does not provide built-in support for subscriptions. ... To enable subscriptions, you must first swap to using the expressMiddleware function ......

What Server-Sent Events is - and how and when to implement it

SSE is commonly used to send message updates or continuous data streams to a browser client. In a nutshell, a server-sent event is...