htmx:targeterror in django project

Using Django Templates & Frontend
1

My objective is to click on a list item (an asset) to load and update a form, that is right next to the list, using htmx in django, but I am getting HTMX:Targeterror… I believe I have given the hx-target correctly, I cannot figure out why this problem appears… Someone, please help…

I am getting htmx:targetError when using the below code… can u help me figure out the issue?

TEMPLATE

{% for asset in portfolio.children %}
            <tr id="asset-{{ asset.id }}" >
              <td class="col-md-12 col-lg-12 node-style" hx-get="{% url 'portfolio:asset-update' asset.id %}"
              hx-target="#assetUpdate" hx-swap="outerHTML">&emsp;{{ asset.name }}</td>
            </tr>

VIEWS.PY ASSET_UPDATE

def asset_update(request, id):
    asset = Asset.objects.get(id=id)
    update_asset_form = AssetForm(request.POST or None, instance=asset)

    if update_asset_form.is_valid():
        update_asset_form.save()
    context = {
        "update_asset_form": update_asset_form,
        "asset": asset,
    }
    return render(request, "portfolio/partials/02-asset-update.html", context)

02-ASSET-UPDATE.HTML

{% load crispy_forms_filters %}
{% load crispy_forms_tags %}

<div id="assetUpdate">
    <form method="post" class="form-group" novalidate>
        {% csrf_token %}
        {% crispy update_asset_form %}
        <button type="submit" class="bland-button-style" hx-post="{% url 'portfolio:asset-update' asset_id=asset.id %}"
            hx-target="#assetUpdate" hx-swap="outerHTML">
            <i class="fa-solid fa-cloud-arrow-down fa-lg header-icon-style portfolio-save-icon"></i>
        </button>
    </form>
</div>
2

Is there any chance that you have multiple elements with the same ID on that page?

What’s the complete error message you are seeing?

I don’t understand the relationship between the template fragment at the top and 02-asset-update.html further down. What is in the page when it is first rendered? Is there an element with id = assetUpdate when the page first loads?

3

Hi Ken, the usecase is like this…I have 2 divs next to each other, with list of assets in one and an asset form for other (used for creating and updating form details)… I used htmx to update the form without browser refresh…

When it first renders, we have a blank form… then we enter asset details and save it… so far so good… then I click on the asset that is defined and the form should show the details of the selected asset and be able to update and save…

so, the template at the top has the hx commands to trigger the product_update function which calls 02-asset-update.html… here I am using assetUpdate id in the div to call the form…

after I posted this message, i realized that i need to have assetUpdate id in my template as well… so I have used

{% include ‘02-asset-update.html’ with update_asset_form=update_asset_form %}
thinking that I can bring in the html from 02-asset-update, so that I will have the div with assetUpdate id and it would work…

now I get a message AttributeError: ‘str’ object has no attribute ‘is_bound’, when I place this include command… I feel I am logically correct in having the include command, but then I dont understand how a context variable would become a str object?

When I dont use include, the 02-asset-update renders correctly, but then I have the problem of not able to call the div id, since it is not in template …

I hope I am making sense… as a next step to my previous Q, I am at resolving AttributeError: ‘str’ object has no attribute ‘is_bound’…

4

Actually, I would just recommend adding an empty div - <div id=“assetUpdate”></div> instead of trying to render the full empty form.