https://htmx.org logo
Powered by
# htmx-general
  • s
    How can I use the library offline for a flask project
  • m
    offline isn't gonna be a good fit for htmx, it's geared towards server requests
  • g
    you could do something with service workers, but it's not what htmx is optimized for
  • q
    Good day! Another question from an htmx newbie) I am building a form with htmx. I need to add some parameters to the data being sent to the server. So I am adding this code to my main.js as described in the docs (https://htmx.org/events/#htmx:configRequest):
    Copy code
    javascript
document.body.addEventListener('htmx:configRequest', function(evt) {
    evt.detail.parameters['test'] = "test!"; // add a new parameter into the mix
});
    But this code must work for all of the htmx requests. I cannot add an event listener to certain element as it is being added on the fly and later processed with 
    htmx.process
    . How do I limit the event listener to only a certain element?
  • g
    You might look into writing it as an extension. Then you can apply your logic explicitly to any form you need.
  • g
    Would that work?
  • q
    Thanks, @User ! Never heard of this functionality. Does it have to modify the form markup that I receive from the server (it would be hard to do)?
  • q
    Just looked at the extensions. Isn't it an overkill here? And it seems to require form markup modification. It would be great if I could avoid the form markup modification as it is not gully under my control.
  • m
    A few different ways to skin this cat. If you want to remain in pure JS, you can check the target of the event for a class that you use to flag for parameter inclusion:
    Copy code
    js
document.body.addEventListener('htmx:configRequest', function(evt) {
    if(evt.target.classList.contains('include-param') {
      evt.detail.parameters['test'] = "test!"; // add a new parameter into the mix
    }
});
  • m
    and then use that class on the elements you want to include that parameter on:
    Copy code
    html
  <div hx-post="/whatever" class="include-param">
   ...
  </div>
  • m
    If it is a matter of simply including a parameter, with no other logic, you might consider using 
    hx-vals
    or sticking it in a hidden input and using 
    hx-include
  • m
    finally, for completeness (and we don't recommend this) here is the hyperscript:
    Copy code
    html
  <script type="text/hyperscript">
    on htmx:configRequest(parameters) in .include-param 
      set parameters['test'] = 'test!'
  </script>
  • q
    Cool! I will probably go with the 1st one.
  • q
    Those beginner questions tend to come in packs) Sorry. I am using SweetAlert2 and need to stop showing the loader after the form is loaded with htmx. Can't figure out, how to do it.
    Copy code
    javascript
        didOpen: async () => {
            Swal.showLoading();
            await htmx.process(htmx.find("#js-final-form"));
            Swal.hideLoading();
        },
  • m
    This would likely be better done as an extension
  • m
    you can use the 
    htmx:beforeRequest
    and 
    htmx:afterRequest
    events to call 
    Swal.showLoading()
    and 
    Swal.hideLoading()
    respectively
  • m
    Copy code
    js
htmx.defineExtension('swal-indicator', {
    onEvent: function (name, evt) {
        if (name === "htmx:beforeRequest") {
            Swal.showLoading();
        } else if(name == "htmx:afterRequest") {
            Swal.hideLoading();
        }
    }
});
  • m
    then
    Copy code
    html
  <div hx-post="/whatever" hx-ext="swal-indicator">
   ...
  </div>
  • g
    Copy code
    js
didOpen: async () => {
            Swal.showLoading();
            const $form = htmx.find("#js-final-form")
            htmx.process($form);
            $form.addEventListener('htmx:afterRequest', () => {
                Swal.hideLoading()
            }, { once: true });
        },
  • m
    (untested, but that's the rough idea)
  • q
    Super! That did the trick! Thank you!
  • g
    i am a javascript
  • g
    No problem!
  • q
    Thank you! Although this way is not for me in this case, but your answer teaches new ways of using htmx.
  • m
    👍
  • q
    @User lol, but noone knows...) (got it from here - https://denizaksimsek.com/2021/htmx-doodles/)
  • g
  • m
    sprinkle oriented development
  • g
    you know how there's another thing called hyperscript?
  • g
    I looked up "sprinkle programming language" and there seems to be no such thing
1...352353354...1146Latest