Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    cscortes
    @cscortes
    yes, commented on your comment. But your are correct -2 places with current design.
    cscortes
    @cscortes
    @chg20 oops, -2 sounds bad -- i apologize for the miscommunication, hopefully my comments on github are better worded.
    1cg
    @1cg
    No worries 😉
    Htmx 0.1 should be going out next Friday
    Ben Croker
    @bencroker
    Great!!
    cscortes
    @cscortes

    @chg20 I wrote a sample sse example with a flask server. I make the following change to:

            function processSSETrigger(elt, verb, path, sseEventName) {
                var sseSourceElt = getClosestMatch(elt, function (parent) {
                    return getInternalData(parent).sseEventSource != null;
                });
                if (sseSourceElt) {
                    var sseEventSource = getInternalData(sseSourceElt).sseEventSource;
    
                    var sseListener = function (event) {
                        if (!maybeCloseSSESource(sseSourceElt)) {
                            if (bodyContains(elt)) {
                                getInternalData(elt).sseEvent = event;
                                issueAjaxRequest(elt, verb, path);
                            } else {
                                sseEventSource.removeEventListener(sseEventName, sseListener);
                            }
                        }

    noticed I assigned the event to internal data of the element, this may not be the best way to do it.
    Can you make some recommendations?

    1cg
    @1cg
    can you show me a diff?
    cscortes
    @cscortes
    Yes, but its been a while since I made this change, don't know how much sense it will make.
    @chg20 here you go:
    795c787,788
    <                 var sseListener = function () {
    ---
    >                 
    >                 var sseListener = function (event) {
    797a791
    >                             getInternalData(elt).sseEvent = event;
    1cg
    @1cg
    hmm
    storing the event in the internal data seems a little strange, what's the need?
    cscortes
    @cscortes
    I use that internal data later in my cusotm sse-body extension I was developing.
    like so:
    htmx.defineExtension('sse-body', {
        encodeParameters : function(headers, parameters, elt) {
            headers["Content-Type"] = "application/json";
            return elt["htmx-internal-data"].sseEvent.data;
        }
    });
    1cg
    @1cg
    @cscortes there is a bug around SSE and using the event content here: bigskysoftware/htmx#66
    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
    cscortes
    @cscortes
    ok. my code looks similar. but it is more verbose with the extension.
    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.
    1cg
    @1cg
    as much as possible if it can pass through the normal response handling, that would give us the maximum flexbility
    cscortes
    @cscortes
    this is what that looks like:
       <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>
    1cg
    @1cg
    nice
    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
    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.