# HTMX not loading

**URL:** <https://forum.djangoproject.com/t/htmx-not-loading/39464>\
**Category:** Mystery Errors\
**Created:** [March 10, 2025, 6:34pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464 "2025-03-10T18:34:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 10, 2025, 6:34pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/1 "2025-03-10T18:34:06Z")

</div>

I just started trying to implement HTMX into an existing Django app. What I think should be the easiest step of all is causing me the most problems, and I’m sure it’s a very simple solution that is just escaping me somehow.

I can’t seem to get the HTMX JS code to be included in my app. I’ve added it to Main.html which is included in all templates. I tried using the CDN as well as downloading the min version and putting it into my static/JS folder.

The “ **load** ” process that I have here does not get called.

```auto
    <div hx_get="/albums/album_partial_gallery/" hx_trigger="load">
        Loading gallery...
    </div>

```

I’m using the following code to test whether or not it is loaded.

```auto
    if request.headers.get('HX-Request'):
        htmx=False
    else:
        htmx=True

```

Here is where I am including the HTMX JavaScript…

```auto
<script src="{% static 'js/htmx.min.js' %}"></script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 10, 2025, 6:43pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/2 "2025-03-10T18:43:27Z")

</div>

Is this a development environment, or a production deployment environment?

What specific directory is `htmx.min.js` in?

What is the html that was rendered for that script tag?  
What request are you seeing on the server for this file?

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 10, 2025, 7:07pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/3 "2025-03-10T19:07:04Z")

</div>

This is in a development environment (localhost:8000).

The html for the script tag looks like this…

```auto
<script src="/static/js/htmx.min.js"></script>

```

This is where the htmx.min.js is located. However, I also tried including…

```auto
<script src="https://unpkg.com/htmx.org@2.0.0"></script>

```

in the head section.

The initial view on the server loads fine and renders the page correct, but it does not recognize that htmx is included in the headers.

The second view, album\_partial\_gallery, which should be called by the “load” event in the htmx tag never gets called.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 10, 2025, 7:14pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/4 "2025-03-10T19:14:55Z")

</div>

> [@PyPHAnetwork](#):
>
> This is where the htmx.min.js is located.

Please be specific, exactly what _complete_ directory is htmx.min.js located in?

How does that fit in with your project directory structure?

> [@PyPHAnetwork](#):
>
> `<script src="https://unpkg.com/htmx.org@2.0.0"></script>`

What is your browser telling you about this request? Is it successful?

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 10, 2025, 7:35pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/5 "2025-03-10T19:35:13Z")

</div>

Here is the folder to the htmx.min.js file.

C:\Users\bob\Documents\Python-Django\Ursus\static\js

I also have another JavaScript module/file in this same folder and I added

```auto
console.log('Hello, World!);

```

to that code just to make sure it was being included, and that text does appear in the console.

When I used the alternate script tag ([unpkg.com](http://unpkg.com)) I did not get any communication from the browser that the include had failed, however, the code I used to test the presence of ‘HX-Request’ still returned False.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 10, 2025, 7:48pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/6 "2025-03-10T19:48:41Z")

</div>

> [@PyPHAnetwork](#):
>
> I did not get any communication from the browser that the include had failed,

But what about confirmation that the request _worked_?  
What about confirmation that the file was retrieved and loaded?

We may need to see the complete template, and any parent templates that this extends.

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 10, 2025, 8:21pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/7 "2025-03-10T20:21:49Z")

</div>

Here is the full template…

```auto
{% extends 'main.html' %}

{% block content %}

    {% load static %}

    <h3 class="text-warning bg-secondary px-5 pt-2 pb-2">Album Gallery</h3>

    <div class="container-mt-4 d-flex align-items-center justify-content-center">
        {% if show_list %}
            <a href="{% url 'albums' %}" title="Return to Album List">
                <button type="button" class="btn btn-primary" style="width: 250px;">Return to Album List</button>
            </a>
        {% else %}
            <a href="{% url 'albums_grid' %}" title="Return to Album Grid">
                <button type="button" class="btn btn-primary" style="width: 250px;">Return to Album Grid</button>
            </a>
        {% endif %}
        &nbsp;
{# <a href="{% url 'album_sections' album_object.id source %}">#}
{# <button type="button" class="btn btn-primary" style="width: 250px;">Return to Chapter List</button>#}
{# </a>#}
    </div>

    <div>
        {{ htmx_status }}
    </div>

    <div hx_get="/albums/album_partial_gallery/" hx_trigger="load">
        Loading gallery...
    </div>

{% endblock content %}

```

Here is the view that loads this template…

```auto
def album_gallery_test(request, album_section_id):
    source = request.session['album_source']
    show_list = True
    if source == 'grid':
        show_list = False
    if request.headers.get('HX-Request'):
        htmx=True
    else:
        htmx=False
    context = {
        "source": source,
        "show_list": show_list,
        "htmx_status": htmx,
    }
    return render(request, 'Albums/albums_lazy_images.html', context)

```

Here is the code that should be called from the “load” event but I confirmed from the debugger that it never gets here…

```auto
def album_partial_gallery(request):
    time.sleep(2)
    context = {}
    return render(request, 'Albums/Partials/album_images.html',context)

```

Please let me know if you need to see anything else.

Thanks.

---

<div class="post-metadata">

**Author:** ![leandrodesouzadev](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/leandrodesouzadev/32/8981_2.png) [@leandrodesouzadev](https://forum.djangoproject.com/u/leandrodesouzadev)\
**Post date:** [March 10, 2025, 8:40pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/8 "2025-03-10T20:40:52Z")

</div>

> [@PyPHAnetwork](#):
>
> ```auto
> {% extends 'main.html' %}
> 
> ```

We also need to see the extended “main.html” template

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 10, 2025, 8:54pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/9 "2025-03-10T20:54:52Z")

</div>

Here is main.html

```auto
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    {# <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">#}

    <link rel="stylesheet" type="text/css" href='{% static "styles/styles.css" %}'>
    <link rel="stylesheet" type="text/css" href='{% static "styles/bootstrap.css" %}'>
    <link rel="stylesheet" type="text/css" href='{% static "styles/font-awesome.css" %}'>
    <link rel="stylesheet" type="text/css" href='{% static "styles/main.css" %}'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <title>Ursus</title>
</head>
<body>
{% include 'navbar.html' %}

{% if messages %}
    {% for message in messages %}
        {% if message.tags == "success" %}
            <div id="myAlert" class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Note!</strong> {{ message }}
                <button type="button" class="btn-close btn-success" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
        {% if message.tags == "warning" %}
            <div id="myAlert" class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>Warning!</strong> {{ message }}
                <button type="button" class="btn-close btn-warning" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
        {% if message.tags == "error" %}
            <div id="myAlert" class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>Error!</strong> {{ message }}
                <button type="button" class="btn-close btn-danger" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
    {% endfor %}
{% endif %}

{% block content %}

{% endblock content %}

<div class="mt-5">
    <div class="footer bg-success py-2">
        <div class="container">
            <div class="row">
                <div class="col-md-4 my-3">
                    <h6>About Ursus</h6>
                    <p>
                        Litora nullam nec elit mus phasellus tempus rutrum lorem inceptos arcu. Maecenas tristique justo
                        potenti risus ac aliquet fusce arcu etiam. Senectus quis odio natoque taciti maximus si nullam
                        conubia vel mattis. </p>
                </div>
                <div class="col-md-4 my-3">
                    <h6>Links</h6>
                    <ul class="list-unstyled">
                        <li>
                            Useful: <a href="#">Expertise</a>,
                            <a href="#">Pricing</a>
                        </li>
                        <li>
                            Menu: <a href="{% url 'albums' %}">Home</a>, <a href="#">Details</a>,
                            <a href="#">Solutions</a>,
                            <a href="{% url 'profile' %}">Profile</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4 my-3">
                    <div class="mb-4">
                        <a href="#" class="text-decoration-none" tooltip="Meta/Facebook">
                            <i class="bi bi-meta main-icons"></i>
                        </a>
                        <a href="#" class="text-decoration-none" tooltip="X/Twitter">
                            <i class="bi bi-twitter-x main-icons"></i>
                        </a>
                        <a href="#" class="text-decoration-none" tooltip="Linked-In">
                            <i class="bi bi-linkedin main-icons"></i>
                        </a>
                        <a href="#" class="text-decoration-none" tooltip="Youtube">
                            <i class="bi bi-youtube main-icons"></i>
                        </a>
                        <a href="#" class="text-decoration-none" tooltip="Dropbox">
                            <i class="bi bi-dropbox main-icons"></i>
                        </a>
                    </div>
                    <p>
                        We would love to hear from you
                        <a href="mailto:contact@site.com"
                        ><strong>contact-us@ursus.io</strong></a
                        >
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $(".close").click(function () {
            $("#myAlert").alert();
        });
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/UrsusScripts.js' %}"></script>
<script src="{% static 'js/htmx.min.js' %}"></script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 10, 2025, 9:50pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/10 "2025-03-10T21:50:23Z")

</div>

I’d say the first thing you ought to try would be to move the loading of htmx to the top of the page header.

But you also still want to confirm that htmx itself is being loaded by the browser.

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 10, 2025, 10:27pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/11 "2025-03-10T22:27:53Z")

</div>

I moved it to the very top of the section but it didn’t make a difference.

Thanks

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 10, 2025, 10:30pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/12 "2025-03-10T22:30:33Z")

</div>

Top of which section?

It should be in the `<head>` element.

Quoting directly from the docs at [\</\> htmx ~ Documentation](https://htmx.org/docs/#installing)

> Htmx is a dependency-free, browser-oriented javascript library. This means that using it is as simple as adding a `<script>` tag to your document head. There is no need for a build system to use it.

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 10, 2025, 10:44pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/13 "2025-03-10T22:44:44Z")

</div>

Yes, that’s where I have it now, and I had it there originally. Doesn’t seem to make a difference though.

---

<div class="post-metadata">

**Author:** ![leandrodesouzadev](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/leandrodesouzadev/32/8981_2.png) [@leandrodesouzadev](https://forum.djangoproject.com/u/leandrodesouzadev)\
**Post date:** [March 11, 2025, 11:32am UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/14 "2025-03-11T11:32:24Z")

</div>

Is there any errors on the console tab of your browser?  
Do you see an log entry on your `runserver`console window for a GET request to the htmx.min file?

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 11, 2025, 11:57am UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/15 "2025-03-11T11:57:54Z")

</div>

I checked the console and there are no errors.

Thanks

---

<div class="post-metadata">

**Author:** ![leandrodesouzadev](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/leandrodesouzadev/32/8981_2.png) [@leandrodesouzadev](https://forum.djangoproject.com/u/leandrodesouzadev)\
**Post date:** [March 11, 2025, 12:11pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/16 "2025-03-11T12:11:07Z")

</div>

> [@leandrodesouzadev](#):
>
> Do you see an log entry on your `runserver`console window for a GET request to the htmx.min file?

What about the second question? This is the confirmation that the browser is issuing the GET request for the static file.

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 11, 2025, 12:39pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/17 "2025-03-11T12:39:38Z")

</div>

I see nothing in the console except some text that I am sending to the console from the UrsusScripts.js file.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 11, 2025, 12:44pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/18 "2025-03-11T12:44:39Z")

</div>

> [@KenWhitesell](#):
>
> But what about confirmation that the request _worked_?  
> What about confirmation that the file was retrieved and loaded?

For clarity, we’re talking about confirmation from three different locations:

- Your runserver console, which shows the requests that have been submitted from the browser.

- The “Network” tab in your browser’s developer tools showing that the request has been made by the browser to the server.

- The “Elements” tab in your browser’s developer tools showing that the code has been injected into the DOM.

---

<div class="post-metadata">

**Author:** ![PyPHAnetwork](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/pyphanetwork/32/28160_2.png) [@PyPHAnetwork](https://forum.djangoproject.com/u/PyPHAnetwork)\
**Post date:** [March 11, 2025, 1:16pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/19 "2025-03-11T13:16:57Z")

</div>

I have attached captures of the Elements and Network console.

 ![HTXISSUE_02_Elements](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/a/d/ada3521bd01b4a0a572805b7632e2ece14fae817.png)  
 ![HTXISSUE_01_Network](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/f/c/fcac1bcce0d44037b3809b1e28ded8e90fa94fae.png)

Okay, here’s where the part of me that should have gone into finish carpentry comes in!! I’m not sure what you mean by runserver console, unless you mean the Python run console. I can see that the application is running but I don’t see anything else. Can you elaborate on what you mean by that, and assume you are explaining this to a finish carpenter for the very first time 🙂!

Thanks as always for all of your feedback and efforts to help me solve this!

---

<div class="post-metadata">

**Author:** ![leandrodesouzadev](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/leandrodesouzadev/32/8981_2.png) [@leandrodesouzadev](https://forum.djangoproject.com/u/leandrodesouzadev)\
**Post date:** [March 11, 2025, 1:29pm UTC](https://forum.djangoproject.com/t/htmx-not-loading/39464/20 "2025-03-11T13:29:12Z")

</div>

> [@PyPHAnetwork](#):
>
> Okay, here’s where the part of me that should have gone into finish carpentry comes in!! I’m not sure what you mean by runserver console, unless you mean the Python run console

Thats exactly it.  
But from the prints you provided it seems that the request is actually being served correctly.

One thing that you might notice is that the request/response is being cached by your browser. Maybe that can be causing the issue. I would first, check if the response looks like the minified version of HTMX (if is not an empty file for example). And do a hard reset (with the devtools on the browser open, right click on the refresh button on your browser and then “clear cache and hard reload”).

After that, if there’s still a problem, I would double check the code to see if there are no syntax errors or anything.

[Next page](https://forum.djangoproject.com/t/htmx-not-loading/39464.md?page=2)