A lot of developers work on legacy, which explains jQuery.

5% htmx is pretty good I would say, probably more than last year and for sure less than next year 🥳

so I updated my project to use the csrf cookie and I think it works just as well/better

<script>
    if (getCookie === undefined) {
      function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
            }
          }
        }
        return cookieValue;
      }
      document.body.addEventListener('htmx:configRequest', (event) => {
        event.detail.headers['X-CSRFToken'] = getCookie('csrftoken');
      })
    };
  </script>

Note that this requires the csrf cookie to NOT be http only: https://docs.djangoproject.com/en/4.0/ref/settings/#std:setting-CSRF_COOKIE_HTTPONLY Which the docs state is 100% acceptable and not an issue

The check for definition will ensure that it works with boosted links

What do you use to replace stuff like DataTables or Select2?

I created a HTMX Table by hand ... at first I thought it will be massively painful, but it was quite nice actually so far ... creating inline editing as we speak.

I used a django forms generated template that switches with the element on click ... neat.

https://github.com/rg3915/django-htmx-tutorial translating this was a pain, but helped me a lot

that resolve my csrf issue @User

select2 check out https://tom-select.js.org/

idk about datatable

I would love a non jquery version of that

although agreed you can get most of what it provides w/ htmx decently

although some features like printing I think it's nice to have out of the box

@User thanks man 😄

happy to help

Awesome! 🥳

@hundreds-camera-24900 so with this solution you're basically creating the csrfmiddlewaretoken directly in the front-end, right? That way you don't depend on the `{% csrf_token %}`from the Django templates?

yeah I mean it's not that it's impossible or hard - but also don't want to reinvent the wheel for already existing and well-working widgets, right?

I guess I'm trying to use less jQuery, but not sure I'm at a point yet where I can completely drop it... then again I'm wondering if I'm doing it wrong by adding jQuery to new projects, just so I can use all the fancy widgets (toastr, select2, datatables, all-the-things Bootstrap4, simple animations) & how other people are doing it without sinking time into learning a framework like React/Vue

Ha! We'r on the more or less the same journey @User - trying to reduce our jQuery dependency. We've decided to be pragmatic about it and phase it out over time. We've started by replacing almost all current event handlers with hyperscript and now we're slowly starting to phase out jQuery-based widgets too. select2 is a tough one, because we use it extensively. We're looking into replacing it with tomselect, but some things, like jqgrid, which has tons of advanced features we use, will be harder to phase out. We still have a sprinkling of datatables as well, these will probably go soon, because doing search and ordering using hyperscript for these should be relatively staightforward

hehe glad I'm not the only one~ though I feel like I'm not good enough with JavaScript to have Hyperscript's capabilities and syntax come to me naturally... 🙄

I mean sorting and searching through tables can be achieved quite easily with HTMX; though it requires more than just a simple REST API. What else are you using Hyperscript for?

Oh - hyperscript syntax comes completely naturally to only one person alive all the time, and that's @User. @User doesn't suck too much at it either ( 😜 ) , nor does @User or @User and a smatterling of others. Then you get someone like me... waaaaaay down the curve, who initially used hyperscript in self-defence mode only, that is to say, very lightly and quite badly. But man, it grows on you, the more you use it. And the upfront investment of figuring out the right syntax at write time, is so worth it when you come back to that code later, because at read-time is where hyperscript really shines - because it's just so clear what the code does

> because it's just so clear what the code does The exact reason I love Python 😛 alright; maybe it's not too late to make the switch yet... are you using Hyperscript for anything else other than animations, simple user feedback and post-htmx function-calls?

Currently, not really. It's mostly click handlers or htmx:beforeRequest / htmx:afterRequest handlers. We're sprinkling in more and more hyperscript over time, mostly to replace jQuery client-side behaviour

The fanciest thing we currently use, must be our custom slide show/hide extension, as in this bad boy:

javascript
   _hyperscript.config.hideShowStrategies = {
        
        slide: function (op, element, arg) {
                
            element.style.transition = 'height linear 200ms'
            element.style.overflow = 'hidden'
            var current = element.getBoundingClientRect().height
            element.style.height = 'auto';
            element.style.display = (arg ? arg : 'block');
            var full = (current > 0 ? current : element.getBoundingClientRect().height);
            element.style.height = current + "px";
            
            setTimeout(function () {
                if (op === 'hide') {
                    element.style.height = "0px";
                    element.addEventListener('transitionend', function () {
                        element.style.display = "none";
                    }, {once: true});                            
                } else {
                    element.style.height = full + "px";
                    element.addEventListener('transitionend', function () {
                        element.style.display = (arg ? arg : 'block');
                    }, {once: true});                                                
                }
            }, 1);                
        }
    }

☝️ that is basically a replacement for $('#id').slideUp() and $('#id').slideDown()

So you can say stuff like:

on click  show #target with slide