https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • t
    Well, it works if the triggering element is the last child
  • t
    Actually, disregard that I'm getting the same error now trying to set the innerHTML directly
  • t
    It does its thing, and then tries to do it again?
  • t
    herp ignore me, I thought I had to call 
    _hyperscript.start()
    after loading new content, which just resulted in duplicate event listeners
  • t
    So much for being the worlds expert at hyperscript
  • b
    Hi there. I got a question. Currently a hx-post request can target the response of a server call to the CONTENT of another element. Would it be possible to target the response of a server call to the ATTRIBUTE of another element? I'm thinking specifically of doing a server call (that generates a PNG), and putting the binary result into the src attribute of an element. More detailed explanation (and example), see http://wmo.co/htmxapp2/static/r01.html
  • f
    I just wanted to give big kudos and express my gratitude to the htmx contributors. I'm only gradually wrapping my head around the library, but so far it seems to me to be incredibly elegant and functional. I'm using it (in conjunction with Python dominate) to enable the various nodes in an existing flow-based programming framework to each expose a different set of UI controls, and my feeling is that it would be much much harder to achieve without htmx.
  • g
    Playing with htmx and I am wondering how to get a hx-get that gets populated by a hx-trigger="load" to refresh after I make an update that affects the data from the initial load?
  • f
    I am liking the way dominate + htmx lets me create functions like this:-
  • f
    Copy code
    def _lazy(resources, **kwargs):
    for (id_resource, obj) in kwargs.items():
        with tag.div(data_hx_get = _url(id_resource),
                     data_hx_trigger = 'load'):
            tag.img(cls='htmx-indicator',
                    src=_url('loading_anim'))
    resources.htm(**kwargs)
  • m
    @User good lookin' code 👍
  • m
    @User we don't have a way right now to update only attributes, instead we rely on an attribute swapping mechanism that enables CSS transitions. You could try the morphdom plugin which might help you accomplish what you are shooting for:
  • m
  • m
    @User can you give me a bit more info? Maybe a code snippet?
  • m
    If you are looking for intercooler-style dependencies, you can take a look at the path-deps plugin: https://htmx.org/extensions/path-deps/
  • b
    Oops - I have been asking htmx qs in the ic channel - sorry! I have a page using IntercoolerJS where I must remove jQuery because of a clash, so am migrating to htmx. I use a loader that I remove with ic-action="fadeOut;remove" , and in htmx I see how the trigger and target are implemented, but I cant get my head around what the equivalent of "ic-action" is. It looks as though I need an extension - "remove somebody else" instead of "remove me" - but that seems hard work for a small function that was so simple in IC so I feel as though I'm missing something. Could somebody clue me in , please? Ta!
  • b
    @mysterious-toddler-20573 Thanks for the suggestion, will look into it!
  • g
    @User What I am looking for is the same ability that I could get with X-IC-Refresh header. My hx-get="/main" loads a list of projects after login. My NEW button opens an off canvas form to enter a new project. This all works well to add a new project. What I need to do is refresh my hx-get="/main" so the new project is displayed. In IC we could send that header and get it to refresh the list.
  • m
    OK, so this would probably be re-implemented using the hx-trigger response header: https://htmx.org/headers/x-hx-trigger/
  • m
    It's more manual, but trigger an event like 
    project-added
    and then add a handler for that event on the body, and pass that on to the appropriate element as an event
  • g
    @mysterious-toddler-20573 I get using hx-trigger to send an event to the body, I've used that for some notifications - not sure that I understand what you mean by pass it along to the appropriate element as an event?
  • m
    so what you could do is trigger an event, say
    Copy code
    HX-Trigger: project-added
    and then write a handler that looked something like this:
    Copy code
    document.body.addEventListener("project-added", function(evt){
    var elt = htmx.find("#project-list");
    htmx.trigger(elt, "refresh-projects");
})
    assuming you have your project list looking like this:
    Copy code
    <div id="project-list" hx-trigger="refresh-projects" hx-get="/main">
  ...
</div>
  • m
    basically you are just passing along the event to the div that needs to refresh (but using a different name it so you don't accidentally get the event into a loop as it bubbles up to the body)
  • g
    @User Ok that works though it's adding more js code which would be nice to avoid. I'd vote to get something in htmx that simplifies it. I did tweak it a bit and made the listener generic and able to handle multiple updates by passing in a selector list to find. So the trigger looks like this:
    Copy code
    header('HX-Trigger: {"refreshme": "#project-list,#thedate"}');
    the handler looks like this:
    Copy code
    document.body.addEventListener("refreshme", function(evt){
    var sel = evt.detail.value;   // element selector to find
    var ary = sel.split(',');
    ary.forEach( function (item, index) {
        var elt = htmx.find(item);
        htmx.trigger(elt, "refreshthis");
        
    });
})
    So then your elements each have their own id ie; #project-list and #thedate and you add the hx-trigger refreshthis to them both. So in my case I have two triggers and it looks like this:
    Copy code
    <div id="project-list" hx-get="/users/projects" hx-trigger="load, refreshthis"></div>
    To test I added a second element that loaded the current date/time on load.
    Copy code
    <div id="thedate" hx-get="/thedate" hx-trigger="load, refreshthis"></div>
    When I add a new project or delete a project the list updates and so does the date display.
  • m
    @User that looks like an htmx plugin to me 🙂
  • m
    pull request?
  • g
    @User I did it as an inline script and it works.
    Copy code
    htmx.defineExtension('refresh-me', {
    onEvent : function(name, evt) {
      if (name === 'refreshme') {
        var sel = evt.detail.value;   // element selector to find
        var ary = sel.split(',');
        
        ary.forEach( function (item, index) {
            var elt = htmx.find(item);
            htmx.trigger(elt, "refreshthis");
        });
      }
    }
  })
  • g
    @User Made a change to refresh-me extension code to allow it to work with both id and class selectors. That is you can add a class like refresh-group-1 to several elements and it will refresh them all.
    Copy code
    htmx.defineExtension('refresh-me', {
    onEvent : function(name, evt) {
      if (name === 'refreshme') {
        var sel = evt.detail.value;  
        var ary = sel.split(',');        
        ary.forEach( function (item, index) {                   
            var elt = htmx.findAll(item);
            elt.forEach( function( elm, index) {
              htmx.trigger(elm, "refreshthis");
            })

        });
      }
    }
  })
  • m
    yeah boy
  • s
    Hi, I have a problem with htmx and webpack (when dynamic imports are used): Consider this sample: Main File:
    Copy code
    <!doctype html>
<html>
<head>
 <script src='bundle.js'></script>
</head>
<body data-page-route='/somepage'>
 <button hx-trigger='click' hx-get='/foobar'>click me</button>
</body>
</html>
    Where bundle.js has this:
    Copy code
    import "htmx"

// On page load it checks if `data-page-route` attribute matches the one present in the router dictionary and then imports dynamically the script associated with a given page.

var Routes = {
 '/somepage': () => import('somepage.js'); //somepage.js is an empty js file.
};

document.addEventListener("DOMContentLoaded", function() {
    var currentRoute = document.body.getAttribute("data-page-route");
    if (currentRoute in Routes) {
        Routes[currentRoute]().then((m) => {
            console.log('loaded script for ${currentRoute}');
        });
    }
});
    For whatever reason when such dynamic import is used, htmx doesn't work. I even removed htmx from webpack and added it to end of page like so, but it doesn't help.
    Copy code
    <!doctype html>
<html>
<head>
 <script src='bundle.js'></script>
</head>
<body data-page-route='/somepage'>
 <button hx-trigger='click' hx-get='/foobar'>click me</button>
<script src="https://unpkg.com/htmx.org@0.0.8"></script>
</body>
</html>
    When I remove this line from bundle js (that is no script is dynamically imported to the page):
    Copy code
    Routes[currentRoute]().then((m) => {
            console.log('loaded script for ${currentRoute}');
   });
    Then htmx works. Note: there is no error from htmx, simply no events work etc. Interestingly I had no problems when 
    intercooler
    was used the same way.
1...131415...1146Latest