Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Geoff Gallaway
    @geoffeg_twitter
    With htmx, is there some way to trigger an event from Javascript? I'm using a geolocation API, and I'd like to reload a part of the page from the server when the location becomes available.
    1cg
    @1cg
    @geoffeg_twitter you can add a custom trigger event to the element you want to refresh and then trigger it manually from javascript:
    <div id="map-data" hx-get="/some/url" hx-trigger="mapUpdated">
       ...
    </div>
    <script>
      htmx.trigger(htmx.find("#map-data"), "mapUpdated")
    </script>
    Where the javscript is fired in the callback from your geolocation API
    Geoff Gallaway
    @geoffeg_twitter
    Great, thanks!
    Cameron Elliott
    @cameronelliott
    @chg20 Thank you for the insight! I very excited about Htmx!
    1cg
    @1cg
    no prob, glad to help
    Alexander Graef
    @pzTV_twitter
    Just trying out htmx, as a big fan of intercooler. Is there an easy way to sync page titles and specific meta data, when using boost ? Thanks
    Alejandro Schmeichler
    @jreviews
    @chg20 Just wanted to quickly stop by and say thanks for all the work you and other volunteers are putting into this tool! Just tried the latest update to test how swapping an element with inputs with a copy of itself works, and even without morphdom, input focus is preserved! Very cool.
    1cg
    @1cg
    @pzTV_twitter We don't do anything with titles or metadata right now. I'm open to suggestions and/or extensions though.
    @jreviews glad to hear it is working well for you, I'm happy with how it has developed :)
    cscortes
    @cscortes
    @chg20 okay, I will see if I can add ic-localvars as a extension.
    Matthew Blott
    @matthewblott
    Hi guys, I've just started using htmx, seems pretty cool - does it work with turbolinks? I couldn't find any info, hence the reason for posting the question here, thanks :-)
    Matthew Blott
    @matthewblott
    Hmm, I just tried the following with no joy :-(
    document.addEventListener('turbolinks:load', () => {
      htmx.trigger(document.body, 'load.htmx', {});
    });
    1cg
    @1cg
    hey @matthewblott try this:
    document.addEventListener('turbolinks:load', () => {
      htmx.processNode(document.body);
    });
    Alexander Graef
    @pzTV_twitter

    @pzTV_twitter We don't do anything with titles or metadata right now. I'm open to suggestions and/or extensions though.

    Thanks, I guess I can use the response header / event trigger for that.

    Matthew Blott
    @matthewblott
    It just throws an error to the console ...
    Uncaught TypeError: htmx.processNode is not a function
        at HTMLDocument.<anonymous> (posttest?Message=abc:51)
        at Object.e.dispatch (turbolinks.min.js:9)
        at r.notifyApplicationAfterPageLoad (turbolinks.min.js:10)
        at r.pageLoaded (turbolinks.min.js:10)
        at turbolinks.min.js:9
    (anonymous) @ posttest?Message=abc:51
    e.dispatch @ turbolinks.min.js:9
    r.notifyApplicationAfterPageLoad @ turbolinks.min.js:10
    r.pageLoaded @ turbolinks.min.js:10
    (anonymous) @ turbolinks.min.js:9
    Matthew Blott
    @matthewblott
    Okay, I'm not a JavaScript programmer (hence the reason for using this library) but my rudimentary skills enabled me to find this workaround.
    //====================================================================
    // Initialization
    //====================================================================
    
    function ready(fn) {
    
      // if (getDocument().readyState !== 'loading') {
      //       fn();
      //   } else {
      //       getDocument().addEventListener('DOMContentLoaded', fn);
      //   }
    
      document.addEventListener('turbolinks:load', () => {
        fn();
      });
    
    }
    1cg
    @1cg
    @matthewblott sorry, I got the code wrong above
    try this:
    document.addEventListener('turbolinks:load', () => {
      htmx.process(document.body);
    });
    you shouldn't need to edit htmx.js to make this work
    Matthew Blott
    @matthewblott
    Thanks @chg20 :-)
    1cg
    @1cg
    :thumbsup:
    1cg
    @1cg
    Proposal to change htmx event naming convention: bigskysoftware/htmx#109
    Willem M
    @wmoco_gitlab
    Hi, htmx is so easy to develop with. Here a database application example: http://wmo.co/htmxapp2/static/htmxapp2.html (work in progress!) It's using htmx 0.0.6 to showcase amalegeni code generation. Have a look at demo x06, and if you are still interested then start looking at the simpler examples to get an understanding. It's using htmx <-> generated go <-> postgres-db. As stated: it's a work in progress, especially the documentation.
    1cg
    @1cg
    @wmoco_gitlab beautiful! All in Go?
    One thought would be adding some hx-push-url attributes so that the URL updates? Depends on how your backend works (you need to differentiate between an ajax request and a full page request) but that makes for bookmarkable URLs and back button support.
    I'm glad you are finding it easy to work with :)
    embarassing, but I finally set up my github sponsors page if anyone would like to sponsor htmx development: https://github.com/sponsors/bigskysoftware
    Willem M
    @wmoco_gitlab
    All in go: yes. You write a mix of sql, an html-template and optionally a bit of go, all on 'the same page' (locality!), and a code generator turns it into Go code, using a template, so that you 'easily' switch to generating grpc code, or add container definitions, or generate java jdbc-template code,..
    Willem M
    @wmoco_gitlab

    The only JS in the application is this bit, for displaying an error in the case that the server is down:

    htmx.on("sendError.htmx", function(evt) {
        document.getElementById("globalerrorpane").innerHTML=
                "sendError.htmx: readyState:" +
                evt.detail.xhr.readyState + " status:" + evt.detail.xhr.status;
    });

    Could you guys come up with a feature in htmx so that I can drop this last line of JS, and I call my application a 'NoJS' web-application? ;-)

    cscortes
    @cscortes
    @wmoco_gitlab sounds like an extension. Easy to generate one and add it to htmx.
    cscortes
    @cscortes
    Don't know why, maybe I missed this, but is there a htmx:ready event? seems like the "load" event was it, but then it got reused elsewhere, but I could be misunderstanding it.
    cscortes
    @cscortes
    nevermind.
    1cg
    @1cg
    everyone, just a heads up: I am going to be insanely busy in July and might not be as responsive as I would like
    Niall O'Brien
    @niallobrien
    Thanks for taking the time to respond to my recent tweets: https://twitter.com/htmx_org/status/1275170688383348737?s=20 - just wondering, do you think adding a frontend server in front of the REST API would add much latency or do you see this extra hop being very minimal in impact? Thanks
    1cg
    @1cg
    @niallobrien My guess is that the extra hop will be minimal if the REST server is hosted in the same area. However, a big part of the advantage of htmx is removing layers in the software development process, so it's harder to recommend it when that isn't an achievable goal.
    You will still get the advantages of REST/HATEOAS, but practically speaking I don't think you'll be amazed unless the server side sitting between the browser and the REST API is doing something interesting and server-sidey :)
    I'd also consider how realistic is that this would eventually be a single-server hop, and how likely it is that other parts of the app might benefit from htmx eventually
    Niall O'Brien
    @niallobrien
    Yeah, very fair points. Our current app is written in ExtJS, and hopping to another SPA-orientated framework doesn't terribly excite me atm
    1cg
    @1cg
    Oof.
    For extjs I might make an exception :)
    1cg
    @1cg
    I had a very bad experience with ExtJS at a startup I worked for a while ago. I can't comment on the current state of affairs, and my sense was that it suffered from being early in the SPA game, but it was a bad time.
    I think if you were to consider migrating to something else from ExtJS as a long term project, htmx would be an excellent choice. ;)
    Niall O'Brien
    @niallobrien
    Agreed, but of course it would mean maintaining a frontend server to talk to the backend API. Though that's no different than using something like Next.js I guess.
    1cg
    @1cg
    Channel, how does everyone feel about discord? Ben has suggested it as a permanent home for htmx discussion.
    Niall O'Brien
    @niallobrien
    I personally prefer Discord
    1cg
    @1cg
    Slack?
    Is slack passé?
    Ben Croker
    @bencroker
    Slack is primarily a team tool and doesn't work well for open communities, at least in my experience (https://craftcms.com/blog/discord).
    Ed Guiness
    @KiwiCoder_twitter

    Could I check my understanding of Htmx parameters?

    Reading the docs I note that

    ...an element that causes a request will include its value if it has one...

    So therefore I had expected this...

            <button hx-post="serverAction"
                    hx-target="closest .insert-me"
                    hx-swap="afterbegin"
                    value="abc"
                    class="btn btn-primary btn-sm">

    ...to send the value "abc" to the server in Form data, but it doesn't?

    What I do see is a header hx-active-element-value containing the "abc" value.

    So I'm not stuck, since I can use the header, but I am a little puzzled. What do you think?