like so:
htmx.defineExtension('sse-body', {
encodeParameters : function(headers, parameters, elt) {
headers["Content-Type"] = "application/json";
return elt["htmx-internal-data"].sseEvent.data;
}
});
Would you like to implement this change?
I have a suggested syntax:
<ol hx-sse="swap on eventName" hx-swap="beforeend">Loading list...</ol>
from what I can tell, what you are trying to do in a plugin would be better done internally
I have a second ajax call to a routine that "handles" the sse data returned. I assumed it wasn't going to be html -- because some streams aren't.
<body id="thebody" hx-sse="connect /news_updates">
<h1>Receiving Messages:</h1>
<div id="sselist" hx-trigger="sse:new_news" hx-ext="sse-body"
hx-post="/news" hx-target="#nid" hx-swap="beforeend">
<ul id="nid">
</ul>
</div>
</body>
that looks not bad
but I think it should be folded into the main htmx code
SSE should work when there is content in the event
I didn't do that in intercooler, but that was a mistake I believe now
The extra call just give the developer a chance to format data that may not be what you expect either text or html, For example, json. But it does require an extra call back to the server. The decoupling though allows to hit a different server possibly for the sse event. I personally don't like to extra call for efficency reasons. To answer the first question, yes I can take a look at the code to make the changes for your recommendation. I will generate a pull request.
@chg20 pull request created for sse data being passed along to the ajax call. works for my example -- let me know if this is what you were thinking.
<body id="thebody" hx-sse="connect /news_updates">
<h1>Receiving Messages:</h1>
<ol hx-trigger="sse:new_news" hx-get="/news" hx-swap="beforeend">
loading list ...
</ol>
</body>
Hi Carson, what's the current status of hyperscript project? FYI the demos don't work on y side https://hyperscript, hyperscript.js is not found
Has anyone tried using select2 with htmx, specifically triggering content loads based on a select2 value change? I can't get the event to trigger properly.
:)
@36864 can you produce a minimal example that I can look at in codepen or similar?
I'd like to start a "user contributed" section in the examples and include stuff like what you are tr ying to accomplish
Re: the status of hyperscript, I am getting the finishing touches put on a 0.0.1 release. The first release will only support event handlers:
<div _="on click add .clickedClass">...</div>
Some demos that should work are up on the dev site: https://dev.htmx.org/docs/#hyperscript
A useful patter that I just developed is the fade-then-remove:
<div hx-trigger="removeMe" hx-delete="/my/url" _"on click add .fadeMe then wait 500ms then trigger removeMe">
Remove Me
</div>
@36864 not sure what your problem is with CORS but using a proxy helps most of the time https://allorigins.win/
i wonder if the DOM is getting hammered by the plugin and the default event isn't working the way one would expect...
Ohhh, that might be it: if the DOM is reworked after htmx gets a crack at it, it might nuke the event handlers.
there are a few possibilities
@inouire_twitter I am going to be cranking on docs tonight (I have to do my day job today unfortunately) and tomorrow lets talk. You may be the first official user of hyperscript in the world. Brave man!
I'll try it out
It does not work unless unless unsafe-eval in enabled in my CSPs :(
Is it really mandatory ? (I guess it's for the "call" feature?)
Another thing, do you plan to add a built-in visibility toggling feature? (That's what I use the most, nut I know I could do it with css classes)
Is it really mandatory ? (I guess it's for the "call" feature?)
Another thing, do you plan to add a built-in visibility toggling feature? (That's what I use the most, nut I know I could do it with css classes)