https://htmx.org logo
Powered by
# htmx-general
  • g
    Yes. This. Good job! šŸ‘
  • m
    looks like it works now šŸ™‚
  • m
    Thanks a lot Ben!
  • g
    In general, htmx works well with external javascript libraries, but you'll always need to be careful about the assumptions that the external library is making. If you switch out the DOM behind a JS library (like DataTabes) that is not expecting it, you'll probably need to do some custom work to keep everything in sync.
  • g
    Ironically, htmx has this same issue. For instance, once I put an htmx element on the page -- such as 
    <button hx-get="/my-server" hx-target="#somewhere">Go</button>
    -- I can't use Javascript to change the 
    hx-get
    element of that button. htmx has already processed it and put its working data in another place.
  • g
    At least for this example, it's one of those open issues that we'll hope we can solve further down the road to make htmx an even more dynamic language.
  • m
    anyway, htmx is really nice and make things a lot easier
  • m
    There was another problem that happened because I removed the inline JS, but as I knew what was the problem, it was just a matter of better specifying the element where DataTables should be rendered.
  • m
    Awesome thank you for helping @gorgeous-ghost-95789
  • m
    Would love a write up for the docs as I know a lot of people use data tables
  • u
    Hi is anyone around to help me dynamically load a stylesheet?
  • u
    I'm pretty sure I should be using htmx for this but a bit lost
  • g
    Yes, that would be good. Unfortunately, I'm not really familiar with DataTables. But, this is a good example of integrating htmx with other general purpose libraries.
  • g
    Howdy @User - I can try to give you a hand, but I think it's not very obvious. I'm working through a potential solution now.
  • u
    That would be great thank you
  • u
    I found something that is just pure JS to do it but Id rather use HTMX
  • g
    I did just try this naive example, which did not work:
    Copy code
    html
<script src="https://unpkg.com/htmx.org"></script>
<div hx-get="style.html" hx-trigger="load"></div>
    style.html
    Copy code
    html
<link rel="stylesheet" href="test.css" />

<style>
    .red {color:red;}
</style>

<h1>This is the Style</h1>
<b class="red">This is Red</b>
<b class="blue">This is Blue</b>
  • g
    Yeah, you're probably going to need to use some kind of javascript to do this. We might simplify it a little with htmx.
  • g
    This does sound like a good feature request, though. I'll post something to GitHub.
  • u
    Copy code
    let css = document.querySelector('#darkMode');
function changeTheme() {
    if (css.getAttribute('href') === '/static/css/0x-light.css') {
        document.cookie = "theme=dark; expires=Thu, 01 Jan 2100 00:00:00 UTC;";
        css.setAttribute('href', '/static/css/0x-dark.css');
    } else if (css.getAttribute('href') === '/static/css/0x-dark.css') {
        document.cookie = "theme=light; expires=Thu, 01 Jan 2100 00:00:00 UTC;";
        css.setAttribute('href', '/static/css/0x-light.css');
    }
}
  • u
    This works
  • g
    Yeah. That might work nicely as hyperscript, but it's still not optimal
  • g
  • m
    yeah, right now we don't dynamically load CSS
  • m
    we probably should, turbolinks does that
  • g
    @User's code looks like it might belong in hyperscript. I made a ticket there, too. We might also want to make cookie manupulations easier, too.
  • u
    glad I brought it up! šŸ™‚
  • u
    Thanks
  • g
    I know I'm sneaking into hyperscript again, but wouldn't you just love to write out this code like this...
    Copy code
    on click from #themeToggler
    toggle [@href] between "/static/css/0x-light.css" and "/static/css/0x-dark.css"
    set cookie "theme" to [@href] expiring 1 year from now
end
    šŸ‘† also added a shameless plug for my date/time library request. Never waste an opportunity, right?
  • m
    Copy code
    def changeTheme() 
    if #darkMode@href is '/static/css/0x-light.css'
        set the document's cookie to "theme=dark; expires=Thu, 01 Jan 2100 00:00:00 UTC;"        
        set #darkMode@href to '/static/css/0x-dark.css'
    else 
        set the document's cookie to "theme=light; expires=Thu, 01 Jan 2100 00:00:00 UTC;"        
        set #darkMode@href to '/static/css/0x-light.css'
1...220221222...1146Latest