Replies: 1 comment 11 replies
-
|
So, there are two ways to approach this. The intended way to use SSE in htmx is to send HTML fragments instead of JSON (just like you would with normal requests). See the examples here https://htmx.org/extensions/server-sent-events/. However, if you have to use JSON, there is a way around it by using client side templates extension https://htmx.org/extensions/client-side-templates/. Just add the attribute with templating engine of your choice to the element that connects to SSE endpoint and you should be good to go. Also, hx-sse is not quite supported and kept for backward compatibility. You should use SSE extension https://htmx.org/extensions/server-sent-events/ instead (migration guide is at the bottom of the page) |
Beta Was this translation helpful? Give feedback.
-
|
I sent you docs for jinja 3, but jinja 2 should work exactly the same https://jinja.palletsprojects.com/en/2.11.x/templates/#escaping |
Beta Was this translation helpful? Give feedback.
-
|
here is how i used template engine
here is the result:
and here is the SSE's link itself: What did I wrong? |
Beta Was this translation helpful? Give feedback.
-
|
You've put your template inside of your target element. After the first swap, the template is overwritten and client-side-templates extension is unable to use it. Put it outside, like in the example I provided <div mustache-template="foo" hx-sse="connect:/ticker swap:message" class="container">
</div> <!-- target ends here -->
<template id="foo"> <!-- template is outside -->
{{#.}}
{{symbol}} - {{price}}
{{/.}}
</template> |
Beta Was this translation helpful? Give feedback.
-
|
I did the same Fastapi uses jinja2, I used |
Beta Was this translation helpful? Give feedback.
-
|
Sovled finally!!! and even didnt need escape anything from jinja2 |
Beta Was this translation helpful? Give feedback.
-
Hi there,
I very new so please excuse me if my question may be wrong or strange
I am sending currency rates from backend (FASTAPI) by using SSE and in data I am sending json format data it's like:
[{'symbol': 'BTCUSDT', 'price': '21418.71000000'}, {'symbol': 'DOGEUSDT', 'price': '0.07382000'}]in the test.html file I used below code
the result is realtime but i see whole json data"
[{'symbol': 'BTCUSDT', 'price': '21418.71000000'}, {'symbol': 'DOGEUSDT', 'price': '0.07382000'}]how can I fix this and be able to whole currency rate or any kind of json data online?
Beta Was this translation helpful? Give feedback.
All reactions