https://htmx.org logo
Powered by
# htmx-general
  • l
    How could I trigger a custom JS function together with hx-get? I looked into hx-trigger but I have the feeling im doing something wrong:
    Copy code
    html
<button class="ml-3 button-nav button-tertiary"
  hx-get="{% url 'listings:hx_list' %}"
  hx-swap="innerHTML" hx-target="#list"
  hx-trigger="myEvent from:body">
  Next
</button>

  <script>
    document.body.addEventListener("myEvent", function(evt){
        alert("myEvent was triggered!");
    })
  </script>
    The request works fine, but once I add the hx-trigger, nothing happens (no request nor alert). What am I missing?
  • h
    trigger kicks of the get request
  • h
    it doesn't fire the event on get request
  • l
    Ah! ok ok... Is there a way to trigger a custom Javascript on a get request? Or would I have trigger the hx-get in my custom js?
  • h
    you can trigger the event on response from the get request
  • h
    through a response header
  • h
  • h
    so that would be click -> htmx issues get request -> server responds w/ hx-trigger -> myevent handler is called
  • m
    In this case I suppose we need to agree
  • c
    @mysterious-toddler-20573 Is there an example of a working work around for handling redirect and forcing a refresh? If not, would doing something like the following work?
    Copy code
    /custom-route?hx-refresh=true
...
In JavaScript or Hyperscript...
Check for the query param and then
location.reload();
  • b
    Anyone have any good tutorial links for working with JSON from apis with htmx. Been looking at https://dev.to/marcusatlocalhost/handle-json-api-results-in-htmx-f46 mostly
  • m
    the 
    HX-Redirect
    response header will issue a full, clientside request
  • c
    Unfortunately, I am issuing the redirect from the server.
  • h
    he's saying rather than issue a 3xx redirect from the server, issue a 200 from the server with the HX-Redirect header
  • h
    and htmx will grab the response and move the window location to the target of the hx-redirect
  • c
    Sorry for the confusion, will give that a try! Thanks a lot.
  • c
    Anyone used the htmx.process() function on a 3rd party library?
  • t
    As in processing code from a 3rd party or calling the function from the 3rd party library?
  • c
    Im using DataTables, a hx-get to return the rows into the this works fine but sorting the rows with the headers clears the rows.
  • c
    Something about telling htmx about the rows after they have loaded but the only code im using is $('#task-table').DataTable({ order: [], })
  • t
    Sounds to me more like an issue with telling datatables about the new rows, if sorting them through datatables causes them to disappear
  • w
    @calm-queen-64495 per their FAQ, it appears you cannot append rows outside of the DataTables API > Q. I append a row to the table using DOM/jQuery, but it is removed on redraw. > A. The issue here is that DataTables doesn't know about your manipulation of the DOM structure - i.e. it doesn't know that you've added a new row, and when it does a redraw it will remove the unknown row. To add, edit or delete information from a DataTable you must use the DataTables API (specifically the row.add(), row().data() and row().remove() methods to add, edit and delete rows.
  • c
    Ah so basically htmx is a no go
  • w
    as far as you cannot use simple swap without notifying DataTables API.
  • w
    Maybe different than your requirements but thought I would add this fwiw...I tried a few different free JS datatables and never found one that I was completely satisfied with. Plus I did not need paging, searching, or formatting... just sorting, plus trying to avoid jQuery, plus the data in some of my tables is updated once every couple of seconds. So anyway, currently I'm just using https://github.com/stationer/SortTable
  • w
    and then I use this to keep things sorted
    Copy code
    document.body.addEventListener('htmx:afterSwap', function (evt) {
    
    if (evt.detail.elt.id.includes("Content")) {
        sortTable.init();
    }
    else {
        var targ = evt.detail.elt.offsetParent;
        if (targ) {
            var col = targ.className.match(/js-sort-\d+/);

            if (col) {
                var colNum; if (col) { colNum = col[0].replace(/js-sort-/, "") }
                var dir = targ.className.match(/js-sort-(a|de)sc/);
                var direction = "asc"; if (dir) { direction = dir[0].replace(/js-sort-/, ""); }
                if (colNum) {
                    sortTable(targ, colNum, direction);
                }
            }
        }
    }
});
  • c
    Copy code
    html
 <table class="table my-0 dashboard" id="task-table">
   <thead class="active-claim-table-head">
    <tr>
     <th>Repairer</th>
     <th>REGO</th>
     <th>Client Name</th>
     <th>Task</th>
     <th>Action</th>
    </tr>
   </thead>
<tbody hx-get="{% url 'admin-list-all-tasks'%}" hx-trigger="load, taskListUpdated from:body" id='task-table-body'>
</tbody>
</table>
  • c
    This is how I am currently adding rows
  • w
    seems like you could use their API in your taskListUpdated function and iterate over new rows and call the row.Add()
  • c
    that taskListUpdated is just making the table redraw at this stage
1...692693694...1146Latest