https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • a
    and this is my HTMX "includes": <script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/nunjucks/3.0.1/nunjucks.min.js" integrity="sha512-IIuR+Zp8wvP0dxNcSsRPoL7SXzP1kGmosDtcU7f6cPObZ9F5Ze/icFSRH/SqigP468jGwDm2XOE0/gSGm/cTBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
  • r
    If your target is disappearing, I think the reason is that there is 
    hx-swap="outerHTML"
    on the page somewhere
  • r
    Could be also in the configs
  • r
    Once it disappears, it will also prevent further requests, as htmx will throw target error
  • a
    I've removed any swap references see above html code
  • a
    also seen it before with incorrect placement of client-side-template, but i've tried just about every DIV 😦
  • a
    the only difference is, i'm not using a button unlike the examples
  • r
    https://jsfiddle.net/db6es4c8/ I've removed unnecessary divs and changed some ids, but it certainly should work
  • r
    The only way I was able to reproduce disappearing is by using 
    hx-swap="outerHTML"
  • r
    alternatively, if there is an error (i.e., wrong key) in your template, it will be rendered as empty string. This is unlikely, but could be useful to double check
  • a
    i've literally just copied and pasted your code and it's not working :/
  • r
    So, it works in the fiddle, but doesn't work in your project?
  • a
    hmm
  • a
    any JS scripts that could interfere?
  • a
    like jQuery?
  • r
    Is there any messages in the console at all?
  • r
    I don't see how jQuery specifically could interfere, but it's generally not impossible. Really hard to tell
  • a
    nothing in the console no
  • a
    literally copied your code: {% extends "base.html" %} {% block content %} <div hx-get="https://random-data-api.com/api/color/random_color" hx-trigger="every 1s" hx-target="#output" nunjucks-template="tmp"> {{ color_name }} {% endblock content %}
  • a
    network response is showing data from the API
  • r
    So there is nothing in the console, but there is also nothing in the DOM. Is \#output still present or does it disappear?
  • a
    as soon as i remove client-side-templates: output appears
  • r
    This line enables the extension When it is present, \#output element disappears from the DOM completely, correct?
  • a
    yes, nothing is displayed at all
  • a
    once removed i get response correctly: {"id":5952,"uid":"191bd038-a886-41ff-85da-db3f9e682d82","hex_value":"#1fd039","color_name":"peach","hsl_value":[98,0.2,0.88],"hsla_value":[279,0.64,0.23,0.3]}
  • a
    can also see response in the network response of the chrome dev tools
  • a
    so it's just not being rendered :S
  • m
    Can you set a breakpoint in the code from the extension and step through what happens?
  • a
    sorry, not sure how I do that :/
  • m

    https://www.youtube.com/watch?v=H0XScE08hy8â–¾

1...729730731...1146Latest