intercooler-js/Lobby

intercooler & htmx discussion

cscortes

@cscortes

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.

1cg

@1cg

:thumbsup:

1cg

@1cg

<button hx-get="/test" _="on afterSettle.htmx add .myClass">
    Click Me!
</button>

cscortes

@cscortes

@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>

Keyur Shah

@keyurshah

hey carson, would you consider adding htmx features to be available from javascript as an api. for example, if i needed to programatically create an ajax request from somewhere else. similar to unpoly's up.request() feature. something like hx.post(). thanks!

1cg

@1cg

@keyurshah that’s what I’m intending hyperscript for

Keyur Shah

@keyurshah

That would be great to call hyperscript as a function.

1cg

@1cg

I intend to add functions to the language soon, so it will be invokable from javascript, but I want to make sure I get the semantics correct enough that I don't embarass myself :)

Edouard

@inouire_twitter

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

36864

@36864

Well, the latest github commit is 0.0.1-alpha1 release. That's pretty alpha.

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.

1cg

@1cg

@inouire_twitter Friday! Give me a few more days!

@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>

1cg

@1cg

hyperscript gives you a ton of flexibility around events and timing in a relatively terse but natural syntax

1cg

@1cg

otoh, as I wrote on twitter:

working on a programming language nobody wants based on a programming language nobody remembers for a world w/ too many programming languages already and economists still think rational choice theory holds up lmao

Eugene Esca

@scsmash3r

:D Cause it is much fun

Edouard

@inouire_twitter

Thanks @chg20 , can't wait to try it on my project, it could save me some visibility togglers written with data-xx attributes and a bit of custom js :)

36864

@36864

I'm having some CORS trouble trying to get an example working on codepen/jsfiddle, will come back to this when I have more time. Basically, see the value-select example in the htmx docs, but use select2 on the first control.

Marcus

@marcus-at-localhost

@36864 not sure what your problem is with CORS but using a proxy helps most of the time https://allorigins.win/

1cg

@1cg

@36864 you are using the "change" event on select2? https://select2.org/programmatic-control/events

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!

1cg

@1cg

Https://dev.hyperscript.org

Edouard

@inouire_twitter

cool !

I'll try it out

Edouard

@inouire_twitter

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)

Thanks !

1cg

@1cg

Unfortunately yes we transpile to JavaScript so it is necessary for now. Eventually I’d like to offer a command line tool to precompile everything but that’s a way off. Can you post the html in question and I can make sure there is a good solution for it?

Seth Livingston

@sethlivingston

can i put an hx-post and hx-target on the outer form, and then add something to the select elements inside the form that just says, submit the form when you change?

i could see how that's not an htmx concern

<form>
  <select ... hx-post="/foo" hx-target="#data-table">
  ...
  <select ... hx-post="/foo" hx-target="#data-table">
</form>

i'm just trying to remove that duplication

Seth Livingston

@sethlivingston

also, is there a way to throttle the posts and gets? so if the user make a quick change to the first AND second select, i'd like to combine them into a single post call

1cg

@1cg

you can move the hx-target up

and you can move the post up too, but you'll need to explicitly catch the "change" event on the form, since it will bubbling

From twitter:

Alright, happy to announce htmx 0.0.5:

https://htmx.org/posts/2020-6-19-htmx-0.0.5-is-released/

and the shiny, new and almost certainly completely broken hyperscript 0.0.1-alpha2:

https://hyperscript.org

And as luck would have it 0.0.5 shipped with a "throttle" modifier on the hx-trigger attribute.

Looks like I didn't document it though :/

https://htmx.org/attributes/hx-trigger/

it's like delay

hx-trigger="changed throttle:100ms"

1cg

@1cg

updated the docs for hx-trigger

Seth Livingston

@sethlivingston

hahaha that's funny about the hx-trigger throttle. thank you!

Where communities thrive

People

Repo info

Activity