https://htmx.org logo
Powered by
# htmx-general
  • s
    There is a new question on StackOverflow. I think it would be good of mor e people subscribe to the htmx tag there, so that people get a good support: https://stackoverflow.com/questions/67133382/unit-testing-htmx/67137646#67137646
  • m
    just absolutely delighted to see so much interest in htmx from the django community
  • m
  • m
    o_O)))
  • m
    hi there folks. I'm trying to use htmx with datatables. But some odd things are happening. To make hx links work in a datatable, I run a htmx.process() after the table loads. The problem is that if I click a link and hit the back button in the browser, I get duplicated table bars (the search bar, number of itens, and pagination)
  • m
    Has anyone tried to use htmx with datatables?
  • m
    This kind of things
  • g
    hi @User - It sounds like the controls of your table are getting duplicated when you do a swap because the original ones are outside of the swap area. To start, I'd check to see where [the search bar, number of items, etc] are placed in your web page. One way or another, you'll probably need to remove the first set to make way for the second. Does this make sense?
  • g
    What creates these controls? Are they included in the HTML sent by your server? Or do you have a Javascript function that adds them afterwards?
  • m
    They are created by DataTables
  • m
    And it only happens when I run htmx.process
  • g
  • m
    yeap
  • g
    This looks like a cool library. I try to avoid JQuery these days, but this would make it worth it!
  • g
    It will probably take a little digging to figure out, but I'm pretty confident that the JQuery plugin is adding these controls around the actual element.
  • m
    yeap, it makes a great amount of work easier.
  • m
    I'm going to check if I can make a datatables extension to work with htmx
  • g
    I'd experiment with a way to swap out ALL of that when you reload the table via htmx. You could generate it with a wrapper DIV, then swap out the whole wrapper when it comes time to update the table. Something like this:
    Copy code
    html
<div id="table-wrapper" hx-get="/my-server" hx-trigger="whatever">
  <table id="dataTable">
    ... all the data in here ...
  </table>
</div>
  • g
    If DataTables is rendering its controls directly above (and below) the 
    #dataTable
    element, then that wrapper div should catch everything when you go to swap it out.
  • m
    return type === 'display' ? '' + data + '' : data; I was using hx-boost on the links generated at the table. I was supposed to replace all of the page (and it does). The problem is when I hit the back button the htmx.process on the rendered table seems to duplicate things.
  • m
    Is there another way of activating htmx on things rendered on the front-end? or is this the correct approach (htmx.process)?
  • g
    Yeah, the back button complicates things, doesn't it 🙂
  • g
    It might be because htmx stores the DOM state on its own, but re-initializing the DataTable re-renders the controls. Perhaps there's a way to recognize that the DataTable has already been initialized, and not re-initialize it on the back button?
  • m
    it's awkward because it keeps happening if I go back and forth
  • g
    Also, 
    hx-boost
    is great, but it might be complicating things. It shouldn't change your outcome, but since you're already doing some custom rendering on your server it wouldn't hurt to just put the 
    hx-get
    and 
    hx-target
    tags in there yourself
  • m
    I will try hx-get / hx-target if works better
  • g
    It would probably simplify things, but probably WON'T fix the problem of duplicating the controls.
  • g
    What happens if you initialize the DataTable twice on the same page without using htmx? Can you make it duplicate your controls like that? If so, then you'll need to add a test to not re-initialize them when the user clicks the "back" button.
  • m
    I will check this. Perhaps I can look at other events of the datatables to see if there is a more appropriate event to use. Perhaps a "first render"
  • m
    I think I've found the problem. My js specific to that page was inline, so when I hit the back button, htmx would fire a request and it would run the js again and init the datatable one more time
1...219220221...1146Latest