2023-04-20

How to make htmx colour animations work with Django?

I have a simple Django project. I'm trying to get this example HTMX colour changing element working. https://htmx.org/examples/animations/

I have copied and pasted the exact code they use into my Django index.html file:

<style>
.smooth {
  transition: all 1s ease-in;
}
</style>
<div id="color-demo" class="smooth" style="color:red"
      hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
  Color Swap Demo
</div>
<script>
    var colors = ['blue', 'green', 'orange', 'red'];
    onGet("/colors", function () {
      var color = colors.shift();
      colors.push(color);
      return '<div id="color-demo" hx-get="/colors" hx-swap="outerHTML" class="smooth" hx-trigger="every 1s" style="color:' + color + '">\n'+
             '  Color Swap Demo\n'+
             '</div>\n'
    });
</script>

This prints out the following: But unlike what is shown in the demo, it doesn't change colours every 1 second.

My command line for the Django server keeps throwing this error every 1 second:

Why is this happening and how can I fix this?



No comments:

Post a Comment