Why I am getting htmx:targetError when calling form.requestSubmit?

I am using htmx to load some content when openning an accordion in my django template. I initially include the cover card partial template and when I close the accordion I remove the whole partial template. Then whenever the accordion opens I dispatch a custom event to trigger the htmx swap and return the same partial template in the response. The code looks like this initially:

...
    <details open id="cover-card-section" hx-get="{% url 'update-cover-card' object.id %}" hx-swap="outerHTML" hx-target="#temp-cover-card-form" hx-trigger="open-cover-card-section">
            <summary  >
                Cover Card
            </summary>
            {% include "path/to/cover_card.html" %}

            {% comment %} Element to be replaced by actual cover card form {% endcomment %}
            <div id="temp-cover-card-form" style="display: none; align-items: center; justify-content: center; width: 100%; height: 200px;">
                <svg width="40" height="40" stroke="rgba(0, 0, 0, 0.5)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>
            </div>
    </details>
...

The cover card partial template looks like this:

<div class="container" id="cover-card-form-container" style="max-width:700px;" object-settings>
    <style>
        ...
    </style>

    <div>
        <form id='image-upload-form' hx-swap="none" hx-encoding='multipart/form-data' hx-post='/en/home/upload-card-image/'>
            {% csrf_token %}
            {{ form.image.errors }}
            {{ form.image.label_tag }}
            {{ form.image }}
        
            <div style="display: none; width: 100%; align-items: center; gap: 8px; margin-bottom: var(--pico-spacing)" id="progress-container">
                <progress style="width: 50%; margin-bottom: 0" id="progress-bar" value="0" max="100"></progress>
                <span id="progress-text">0%</span>
            </div>
            <div id="image-errors" style="display: none;"></div>
        </form>
        <hr> <!-- Divider -->
            
        <form id="cover-card-form" class="container" hx-post="{% url 'update-cover-card' object.id %}" hx-encoding='multipart/form-data' hx-swap="outerHTML" hx-target="#cover-card-form-container">
           ...
        </form>
            
        <footer>
            <button type="submit" id="submit-button" class="primary" form="cover-card-form">Submit</button>
        </footer>
    </div>
<div>
<script defer src="{% static 'path/to/modals_script.js' %}"></script>

At the end is the script where I am loading the js that is giving me the error after the first htmx swap. Everything works fine when the page first loads. The modals_script.js looks like this:

setupEventsListeners()

function setupEventsListeners() {
  let uploadRequest = null;
  let fileId = null;

  console.log("Setting up event listeners")
   // Handle the image upload
   htmx.on('#image-upload-form', 'change', function(evt) {
    if (evt.target.files.length > 0) {

      if (uploadRequest) {
        uploadRequest.abort()
      }
  
      evt.currentTarget.requestSubmit()
      htmx.find('#submit-button').disabled = true;
      htmx.find('#progress-bar').setAttribute('value', 0);
      htmx.find('#progress-container').style.display = 'flex';
    }
  })

  ...
}

The error I am getting is at the line where I am calling evt.currentTarget.requestSubmit(). I have verified if evt.currentTarget is not null and is always the desired element. I have also tried getting the element directly using document.getElementById and still getting the same error. I have also tried event delegation without any luck. There has to be something I am missing out but I don't seem to find what it is.

I tried providing everything that I thought could help but if there is something missing or unclear let me know I will be happy to edit the question.

Вернуться на верх