https://htmx.org logo
Powered by
# htmx-general
  • m
    Copy code
    js
  var myDropzone = new Dropzone("#my-dropzone");
  myDropzone.on("addedfile", function(file) {
    htmx.trigger('#my-dropzone', 'dropzone:complete');
  });
  • m
    or something similar to that
  • m
    I wonder if we should open a pull request for triggering it on the DOM
  • m
    that makes way more sense to me
  • m
    @User seems like a prime extension opportunity
  • m
    OK, I gotta work now
  • l
    Thanks; I'll try that out
  • m
  • m
    I checked Filepond an Uppy, and the latter is the only one that is triggering normal events
  • m
    it'd be trivial to add to dropzone
  • m
    they have the element, they just need to trigger the event
  • m
    They even have a console output on their demo https://uppy.io/examples/dashboard/
  • m
    DOM events are to the DOM as pipes are to Unix
  • m
    So one of the nice things about Alpine is that it has this 
    x-init
    attribute that allows you to initialize any 3rd party library and reference the current element (component) using 
    $el
    and you can do it inline.
  • l
    Cool, that works. I initialized the dropzone element on the complete event as follows.
    Copy code
    php
 Dropzone.options.fileUpload = {
           init: function() {
               this.on("complete", function(file) {
                   htmx.trigger('#test', 'complete');
               });
           }
       };
  • l
    Would be way easier if it just fired on the DOM and I didn't have to add more dirty JavaScript 😆
  • m
    ha! i wa just thinking about init blocks in hyperscript!
  • m
    That would probably be very useful for stuff like this so it's not necessary to create a separate script tag. I am not using hyperscript yet, but it's something I'll definitely explore in the future.
  • m
    yep
  • c
    Is there a list of customers / companies using htmx? Its a great library but one question I get from clients is how much is it being used. Would be good to show them something.
  • s
    I have put together an awesome list of htmx here https://github.com/rajasegar/awesome-htmx Please feel free to raise PRs for adding content
  • c
    Thanks @User !
  • a
    setting django 
    csrftoken
    for AJAX requests in 
    intercooler.js
    was done like:
    Copy code
    $(document).on('beforeAjaxSend.ic', function(event, ajaxSetup, elt){
        ajaxSetup.beforeSend = function(xhr, settings) {
              xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
      });
    would similar thing for 
    htmx
    look like this:
    Copy code
    document.body.addEventListener('htmx:configRequest', function(evt) {
  evt.detail.headers['X-CSRFToken'] = csrftoken;
});
    Above is working but I am not sure is it "proper" way to do it. Is it better to use some other event (
    htmx:xhr:loadend
    ).
  • m
    That looks reasonable, although you could simplify it to :
    Copy code
    js
htmx.on('htmx:configRequest'), function(evt) {
  evt.detail.headers['X-CSRFToken'] = csrftoken;
}
    There is also a django-htmx that is worth looking at: https://github.com/adamchainz/django-htmx
  • g
    Is it possible to skip boost for links that have a data-remote attribute? Or do we need to set hx-boost="false" on each link that we don't want boosted?
  • m
    🤔
  • g
    Using Rails and Rails have the option to make links use xhr by adding a remote: true option to them (which adds the data-remote attribute)
  • m
    You can set hx-boost="false" on a parent to turn it off for a group of anchor tags
  • m
    ah, right
  • m
    OK, let's think
1...170171172...1146Latest