https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • b
    Found the solution : HX-Retarget (If error change the target to any other element if success then return the new form)
  • g
    Hello. Is there a way to show content loaded with htmx only after an image included in the response has finished loading?
  • q
    Hi! I believe this example shows that? https://htmx.org/examples/lazy-load/
  • g
    This is not exactly what I need. I am loading content into an overlay (these are spots on a map) that besides some html, contains a small image. The html is rendered inside the overlay, but the included 
    img
    is naturally loading a bit late. I want to show the whole overlay's content when this image has finished loading.
  • a
    @mysterious-toddler-20573
  • s
    If you give the form an ID, you should be able to place inputs or buttons outside the form tag, as long as you add the 
    form
    attribute to them to indicate it belongs to the form. E.g. 
    <button type="submit" form="id_of_login_form">
  • s
  • g
    if it's supposed to get the page on load, then it's not really clickable anyway, so why even use an 
    <a>
    tag?
  • e
    Would a PR be welcome to send a JSON body when htmx.ajax is called with a CT JSON header?
  • f
    Not sure if you are still figuring this out but what I did to update a plotly graph was to send the data with the following format using hx-get. I was updating the whole graph until I figured this out, you can check it out on jayaro.dev/aurora, mind you I'm in my early stages of redoing my Dash App.
    Copy code
    <script type="text/javascript">
    var data = {
        x: [{time_tag}],
        y: [{bz}]
        };
    Plotly.update("div2", data);
    </script>
  • f
    Hi there! Awesome framework! I'm a total noob, I'm wondering if anybody has tried to capture the data points from a plotly graph using HTMX. I found the javascript to be able to get them but unsure how to pass it to a post request.
    Copy code
    document.getElementsByClassName('js-plotly-plot')[0].on('plotly_click', function(data) {console.log(data)})
  • v
    you can write code between 2 `
  • v
    document.etc...
  • q
    You can use 
    htmx.ajax
  • v
    or
    Copy code
    js
document.getElementsByClassName('js-plotly-plot')[0].on('plotly_click', function(data) {console.log(data)})
  • v
    😉
  • f
    @victorious-lamp-70479 @quick-lamp-41411 Thanks! I fixed the code blocks and I will try with htmx.ajax hopefully I don't get owned by lack of front end skills
  • v
    other tip, for have the colored syntax, you can do ```
  • v
    and then close after your code```
  • r
    Hm, I'm seeing a bit of strange behavior I'd like to avoid when using HTMX - I have a form that does a GET onChange which will swap in values. The issue is that the swap (even if the values are the same) seems to trigger onChange again? But with no query parameters?
  • r
    eg I see the first request happens on the first onChange, then the second request happens which seems to cause a third request, but then the value is reset for some reason. I'm starting to think the dom swap strategy is a problem, going to try idiomorph instead

    https://cdn.discordapp.com/attachments/725789747212976259/1109336227360030821/image.pngâ–¾

  • r
    yep seems to work fine with idiomorph 😃
  • r
    Only remaining issue is that with poor networking conditions, the values of my form inputs are getting reset
  • r
    since by the time the swap happens the user will have typed in more input - are there any workarounds to that?
  • r
    I guess I should back up a bit - I have a dropdown that changes the number of inputs below it based on what the user selects. How can I ensure that if the dropdown is toggled (which submits a get request with the current value of the form) and I change one of the form inputs while the request is pending, when the request completes I don't swap in a "stale" input value?
  • s
    I am not sure I get what exactly you're doing. But did you try to put unique #id on each of the html tags you want to preserve the state of?
  • r
    so event with idiomorph and unique ids if I swap an element that is being edited htmx will use the value from the server rather than the value on the client
  • r
    so with throttling enabled in dev tools, I end up with the value of the input changing out from under me
  • s
    I am even more confused by what you wrote now. Is that a question or a statement? 😄
  • r
    let me explain what I want to do again haha: 1. I have a dropdown with two options, either A or B 2. When A is selected, I want there to be three inputs rendered 3. When B is selected, I want there to be five inputs rendered The issue I'm running into is what happens when the latency is high enough for me to select A, and then start typing into the existing inputs. Those changes end up being lost by the time the request comes back and swaps the HTML
1...113411351136...1146Latest