https://htmx.org logo
Powered by
# htmx-general
  • m
    so are you mixing html5 validations as well as javascript validations?
  • m
    OK, looking at the code, I think that the 
    htmx:configRequest
    would be the best place to hook in a validation step
  • m
    something like this:
    Copy code
    js
htmx.on("htmx:configRequest", function (evt) {
  var instance = $('#first').parsley();
  if(!instance.isValid()){
    evt.details.errors.push("Invalid according to parsley.js");
  }
});
  • m
    That should stop the request from firing
  • m
    I'll document this once we get it working for you
  • a
    I'm also very interested on this. As I know barely nothing of frontend, I would like to see some django + alpine + htmx working together
  • a
    is there a github to see the code? Looking for a friend 😆
  • p
    Certainly: https://github.com/danjac/audiotrails and live here: https://audiotrails.io/ (side project, WIP)
  • a
    😋
  • u
    Same goes with JS components (Datepickers, masked inputs, etc.). Specially if I'm loading forms on demand. Where should I initialize those components after loading the form?
  • a
    @User is this going to be recorded? 👍
  • m
  • m
    You want 
    htmx.onLoad()
  • m
  • p
    I'm seeing an issue with the "revealed" trigger where it sometimes fails with a mysterious error message (at least in the minified htmx version)
  • p
    I think it's in this part of the code
  • p
    Copy code
    setInterval(function() {
                    if (windowIsScrolling) {
                        windowIsScrolling = false;
                        forEach(getDocument().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"), function (elt) {
                            maybeReveal(elt);
                        })
                    }
                }, 200);
            }
  • p
    there probably needs to be some error handling here : perhaps "elt" is not defined for whatever reason. Just a guess though as the error message is so cryptic
  • e
    thanks for the fiddles and exploring an ajax-based autocomplete. They are not using a select though, thus we don't get a nice dropdown. Did you attempt this ? ps: my fav autocomplete for inspiration for the devs :] https://buefy.org/documentation/autocomplete#async-with-custom-template pps: I found https://stackoverflow.com/questions/65658432/select2-change-event-does-not-trigger-htmx on how to make htmx work with django-autocomplete-light's select2, an alternate solution for now maybe. Bye and hats off and thanks for the lib 🙂
  • b
    does anyone know where to find an example on how to create a table from an API endpoint that returns the data?
  • b
    so... i am looking for a way to draw a table from what I get from hx-get
  • m
    the end point should return the html for the table, in standard htmx
  • b
    you mean return a full html
  • m
    No, a partial table:
    Copy code
    <table>
    ...
  </table>
  • m
    If you are working with an existing JSON end point, you could use the client-side-templates extension: https://htmx.org/extensions/client-side-templates/
  • m
    But htmx is going to be happiest if you are just returning fragments of HTML
  • m
    keep it simple
  • b
    so htmx-get
  • m
    Copy code
    html
  <table hx-push-url='true'>
    <thead>
      <tr>
        <th>
          <a hx-get="/table?sort=header1">Header1</a>
        </th>
      <tr>
    </thead>
    <tbody>
      <tr><td>
          <a hx-get="/data/123">Data 1</a>
      </td><tr>
    </tbody>
</table>
  • m
    Something like that, where the header is a link that will sort the table
1...269270271...1146Latest