https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    We should probably wait until after the swap to execute the code
  • m
    Can you open an issue for that?
  • m
    afterSettle is the best work around for now, but I will try to get that fixed this week
  • m
    @User good point, we should defer to the 
    defaultSwapStyle
  • m
    would you like to do a fix for that?
  • q
    @User... ah perfect I can open an issue. btw htmx is really nice. If we could keep the js and html together and build a bit fancier stuff where things like select2 could be wired up on swap then a lot of these fancier interactions would be easier to code and we could go back to our happy Django MVC world and avoid SPA stuff for more cases.
  • m
    @User Sure, I can try 🙂
  • q
  • q
    If you need additional info let me know.
  • m
    @User nope, that's all I need. I can make a really simple example that captures the problem and I bet it's an easy fix
  • q
    Awesome, thanks!
  • m
    @User I'm looking at the code it the script should be executing after the swap/settle. Do you mind sharing your code so I can see how it might be different?
  • m
    @User PR looks good, but I noted a potential issue with it, and I'd like to add tests as well.
  • m
    Sounds like @big-airline-13935 is giving his sprig talk! Hope it’s a banger Ben!
  • q
    @User Here's a minimal example... Main Page
    Copy code
    <html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
        <script src="https://unpkg.com/htmx.org@0.2.0"></script>
    </head>
    <body>
        <h1>htmx test</h1>
        <a href="#" hx-get="{% url 'htmx-select2-example-select2-fragment' %}">load select2</a>
    </body>
</html>
    Fragment with select2 and js code to init
    Copy code
    <select id="test">
    <option>foo</option>
</select>

<script type="text/javascript">
    $(document).ready(function() {
        console.log("about to init select2");
        console.log($("#test"));
        $("#test").select2();
    });
</script>
  • q
    @User btw, if you don't include 
    type="text/javascript"
    nothing happens. You don't get an error but you don't get a select2 either. I'm guessing the js isn't evaled in that case. Perhaps including the type is good form but might be worth mentioning in the docs?
  • q
    ^^ the above examples gives this error:
    Copy code
    htmx.org@0.2.0:1 TypeError: Cannot read property 'querySelectorAll' of undefined
    at J (htmx.org@0.2.0:1)
    at $ (htmx.org@0.2.0:1)
    at eval (eval at Re (htmx.org@0.2.0:1), <anonymous>:2:5)
    at Re (htmx.org@0.2.0:1)
    at He (htmx.org@0.2.0:1)
    at htmx.org@0.2.0:1
    at htmx.org@0.2.0:1
    at R (htmx.org@0.2.0:1)
    at i (htmx.org@0.2.0:1)
  • q
    Happy to share other info if you need it. NB: the ht-get has a django url tag in it b/c that's what I had handy.
  • m
    @User if you just put this:
    Copy code
    html
<script type="text/javascript">
  $("#test").select2();
</script>
  • m
    in the code does it work?
  • m
    Yeah, the 
    type
    attributre is a known issue, fixed in 
    dev
    right now
  • q
    Do you mean excluding the 
    $(document).ready(function() {
    ?
  • q
    I get the same error without that.
  • q
    In playing around with it:
  • q
    The only way I can get it to work is if I have the main page listen on the settle event and do the init there.
  • m
    Is there any sort of module system? It seems like jQuery isn't initialized,
  • m
    I wish I could see what line of code this is:
    Copy code
    `htmx.org@0.2.0:1 TypeError: Cannot read property 'querySelectorAll' of undefined
    at J (htmx.org@0.2.0:1)
    at $ (htmx.org@0.2.0:1)
  • m
    what is calling querySelectorAll()
  • m
    Is that inside the 
    .select2()
    ?
  • m
    The code should be executing after the document has been updated
1...575859...1146Latest