Hi, I am a novice at Django and am trying to build an application that will allow users to report status on various projects on which they are working.
My aim is to have a list of the user’s assigned projects on the page and each time the user clicks on a project hyperlink, a form will appear below where details on the status can be reported.
The project status form is working separately. However, my attempt at swapping in the content of the form on the same page as the list is failing. Essentially, the links are behaving as if the HTMX attributes are not there.
I have a script tag for the htmx js file in my base template and below if the code for the template itself.
I’d appreciate any advice of troubleshooting methods you can recommend. Thanks!
{% extends 'report_manager/base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block title %}
Project Status View
{% endblock %}
{% block content %}
<h4 class="text-info">Project Status List</h4>
<div class="overflow-auto shadow-sm p-3 mb-5 bg-white rounded">
{% if project_status_queryset %}
<ul>
{% for status in project_status_queryset %}
<li>
<a href="{{ status.get_absolute_url }}" hx-trigger="click" hx-get="{{ status.get_absolute_url }}" hx-target="#form-block" hx-swap="innerHTML">{{ status.project }}</a>
</li>
{% endfor %}
</ul>
{% else %}
<p>There are no project status items in the database.</p>
{% endif %}
</div>
<div id="form-block">
{% include 'report_manager/projectstatus_view_partial.html' %}
</div>
{% endblock %}
It is my understanding that the behavior of the <a> element has a higher precedence than the hx-get attribute, and so it is the <a href=" attribute that will apply.
See the docs at Boosting and hx-boost.
You could also reimplement this as something other than an anchor element. (Since in most cases the user isn’t interested in the actual URL, we typically render this as an icon - usually either an “eye” or a “pencil”.)
As a quick test, I changed the tag to a button: <button hx-trigger="click" hx-get="{{ status.get_absolute_url }}" hx-target="#form-block" hx-swap="innerHTML">{{ status.project }}</button>.
Unfortunately, clicking the button does nothing.
I’m wondering if any of the specified hx-* attributes are even being used, but am not sure how to check that.
Are you seeing the request being issued by the browser? Are you getting any response from the server?
If you’re not seeing the request at all, then you’ve got something wrong with your HTMX installation. If you’re seeing the request and not getting anything back, then the issue is likely with the view. If you’re getting something back and it’s not being substituted into the page, then the issue is likely with the response being rendered.
I am running all of this using localhost as my server. I hope that doesn’t matter. I am not seeing a request message in my console when I click the button. I’ve wracked my brain trying to figure out what is wrong. On reloading the page, I see a GET request for htmx.min.js file, which is apparently found, I’ve checked my APPS and MIDDLEWARE, and see that those are both set up correctly according to the django-htmx installation guidelines.
For clarity, you’re saying that you’re running runserver on your local development system? If so, then no, that is not a problem.
Again for clarity, you’re seeing the GET with a 200 response from runserver? Or are you verifying this by looking at your browser’s developer tools?
You might want to dig deeper to verify that the right file is being loaded and is not throwing any errors.
Please show the tag in your template where you’re loading this script.
Also, you may want to verify that the html that was rendered and sent to the browser is as you expect it to be. Don’t just examine the template, check the HTML as it’s shown in the browser after it has been sent.