https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • g
    Wondering when we might see multipart/form-data support to handle file uploads?
  • m
    @User pull request? 😉
  • m
    It was in intercooler, I just need to remember how it all works
  • g
    How To Run Test Server? OK, I have a dumb request. I'm not that familiar with the node environment that runs all of the test cases, so I need some remedial help in getting a server going.
  • g
    I understand node/npm basics, but I'm not sure how to start the test server, and what npm packages I'll need to have installed. Are there magical incantations that I can use to get it running?
  • m
    You shouldn't need to do any o fthat
  • m
    I've set up the tests so that you can just open the index.html in /tests and they will all run
  • m
    with whatever browser you want
  • m
    It's best that it is done with an http server, or some funky stuff can happen with browser permissions against a file:// URL
  • m
    Python has a nice way to run a web server for a given directory: https://pythonbasics.org/webserver/
  • g
    Cool, thanks! I was getting some "not found" errors when I ran it through a local web server, but that's just an 
    npm install
  • b
    Is there any way to re-initialise htmx after initial page load? So if the DOM is swapped out by a third-party JS library, can htmx be made to rescan the document?
  • b
    This seems to work 🙂
    Copy code
    htmx.process(document.body);
  • m
    Yep that’s the correct way
  • m
    At some point I should probably document the JavaScript api 🤔
  • m
    It may be useful if htmx could automatically detect new htmx nodes loaded onto the page via ajax and process them automatically. Not sure about the performance implications of doing this. Alpine does this using the MutationObserver API and looks for nodes with [x-data].
  • n
    Hi all. First time trying htmx for real here. I've been looking for some example of how to best leverage htmx to be used with a modal but couldn't find it. I did find some comment from @User mentioning the personal preference of avoiding modals and inlining the forms. I kinda agree to that, but I'm not the one calling the shots for the UI of the feature, heh. 🙂
  • n
    I think it'd be nice to include some example about how to deal with modals in the examples page list, for the rest of us who can't avoid them.
  • n
    The main issue I'm currently having is that I need to react differently depending on the modal form submission being successful or not. If it's successful, I need to close the modal AND update a specific section of the underlying page with the updated data. If the form submission is not successful, I need to update the form with the proper error messages.
  • n
    I have yet to find a workaround for the case of the error. For the happy path, I'm just returning a redirect to re-render thw whole page which is OK for MVP but not in the long run.
  • n
    Any ideas are welcome 🙂
  • n
    BTW... we're using Bootstrap 3 modals. But we're looking to change for some jQuery-free alternative if that makes it easier.
  • m
    @User you are going to have to drop into javascript to work with the modals, so to me that means using the Trigger header
  • n
    the Trigger header... ok. I'll read about that.
  • m
  • m
    You could have a request respond with the new content for the modal. In the case of an error, rerender the form w/ error messages. In the case of success, use HX-Trigger to fire an event that closes the modal.
  • m
    It would be a good demo, this question does get asked. But, in general, I like inline editing over modals to avoid building up state in the UI 😉
  • m
    @User @User Here you have an example of a modal using htmx, Alpine and tailwind https://codepen.io/jreviews/full/eYZeBja The modal is loaded by htmx and also closed by htmx using a server sent trigger.
  • m
    And here's another one where the modal gets updated from the server when you click the 
    validate
    button https://codepen.io/jreviews/pen/mdPqRrx
  • m
    It's far from a perfect example, but it shows the possibilities
1...222324...1146Latest