title: Can I Reorder a LIst Based On User Provided Values Using Only HTMX?
body: <p>I have HTMX working.  The code below is fully functional.  The one piece I'd like to incorporate, I can't figure out how to do it.  The user is able to provide a number rank...but when they click save, the view returns with the item at the top.  Only after they click reload does the list sort itself based on how I defined the attributes with the model.</p>
  <p>Here's my HTML...</p>
  <pre><code>&lt;h1 class=&quot;title62&quot;&gt;Tasks&lt;/h1&gt;
  
  &lt;button class=&quot;button36&quot; hx-get=&quot;{% url 'MyTasks:create_task_form' %}&quot; hx-target=&quot;#taskforms&quot;&gt;Add Task&lt;/button&gt;
  
  &lt;div id=&quot;taskforms&quot;&gt;&lt;/div&gt;
  
  &lt;div id=&quot;tblData&quot;&gt;
  
  {% if tasks %}
  
    {% for task in tasks %}
  
      {% include &quot;partials/task_detail.html&quot; %}
  
    {% endfor %}
  
  &lt;/div&gt;
  
  {% endif %}
  
  &lt;div hx-target=&quot;this&quot; hx-swap=&quot;outerHTML&quot; hx-headers='{&quot;X-CSRFToken&quot;:&quot;{{ csrf_token }}&quot;}' class=&quot;&quot; &gt;
    &lt;form method=&quot;POST&quot;&gt;
      {% csrf_token %}
  
        &lt;div class=&quot;table22&quot;&gt;
              &lt;table class=&quot;table23&quot;&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th class=&quot;title67&quot;&gt;Number&lt;/th&gt;  
                    &lt;th class=&quot;title67&quot;&gt;Task&lt;/th&gt;  
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;button class=&quot;button35&quot; hx-post=&quot;.&quot;&gt;
                    Save
                  &lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;button33&quot;&gt;
                    Delete
                  &lt;/button&gt;
                  &lt;tr&gt; 
                      &lt;td class=&quot;title73&quot;&gt;{{ form.number }}&lt;/td&gt;
                      &lt;td class=&quot;title73&quot;&gt;{{ form.task }}&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
               &lt;/table&gt; 
            &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      document.body.addEventListener('htmx:configRequest', (event) =&gt; {
          event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
      })
  &lt;/script&gt;
  
  &lt;div hx-target=&quot;this&quot; class=&quot;&quot;&gt;
  
    &lt;div class=&quot;table22&quot;&gt;
          &lt;table class=&quot;table23&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                 &lt;th class=&quot;title67&quot;&gt;Number&lt;/th&gt; 
                 &lt;th class=&quot;title67&quot;&gt;Task&lt;/th&gt; 
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;button class=&quot;button35&quot; hx-get=&quot;{% url 'MyTasks:update_task' task.id %}&quot; hx-swap=&quot;outerHTML&quot;&gt;
                  Update
              &lt;/button&gt;
               &lt;button class=&quot;button34&quot; hx-confirm=&quot;Are you sure you want to delete?&quot; hx-post=&quot;{% url 'MyTasks:delete_task' task.id %}&quot; hx-swap=&quot;outerHTML&quot;&gt;
                  Delete
              &lt;/button&gt;
              &lt;tr&gt;
                   &lt;td class=&quot;title70&quot;&gt;{{ task.number }}&lt;/td&gt;  
                   &lt;td class=&quot;title70&quot;&gt;{{ task.task }}&lt;/td&gt;  
                &lt;/tr&gt;
              &lt;/tbody&gt;
           &lt;/table&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>My Model...</p>
  <pre><code>class Task(models.Model):
  
      task = models.TextField(max_length=264,blank=True,null=True,unique=False)
      number = models.PositiveIntegerField(default=1) 
  
      class Meta:
          ordering = [&quot;number&quot;]
  
      def __str__(self):
          return self.task
  </code></pre>
  <p>I have begun to explore using Javascript to do HTML sorting to approach my issue that way instead.  It just seems to me as capable as HTMX is there should be a way for me to do it leveraging HTMX.  Thanks in advance for any thoughts.</p>