How Do You Trigger HTMX Page Refresh After User Updates Any Part of The Page?-CodePudding

I have been working with HTMX and it's pretty cool compared to the dreaded formsets and Javascript. I have it working....My only issue is when the user updates the form anywhere...you have to manually refresh the page to reset the list of todos. My issue is identical to this one...https://stackoverflow.com/questions/66664407/dynamically-update-table-when-creating-new-enty-using-htmx but there is no resolution listed.....

Here's a quick overview of my code...

My view...

def create_to_do(request):
    user = User.objects.get(id=request.user.id)
    to_dos = NewToDo.objects.filter(created_by=user)    
    form = ToDoForm(request.POST or None)

if request.method == "POST":

    if form.is_valid():
        to_do = form.save(commit=False)
        to_do.created_by = user
        to_do.creation_date = timezone.now()
        to_do.save()
        return redirect("MyToDoList:detail-to-do", pk=to_do.id)
    else:
        return render(request, "partials/to_do_form.html", {
            "form":form
        })

context = {
    "form": form,
    "user": user,
  "to_dos": to_dos,
}

return render(request, "create_to_do.html", context)

Partial detailview....

        <button  hx-get="{% url 'MyToDoList:update-to-do' to_do.id %}" hx-swap="outerHTML">
            Update
        </button>
        <button  hx-post="{% url 'MyToDoList:delete-to-do' to_do.id %}" hx-swap="outerHTML">
            Delete
        </button>
 </div>

Partial todo form....

<div hx-target="this" hx-swap="outerHTML" >
  <form method="POST">
    {% csrf_token %}
      {% if to_do %}
 
                <button  hx-post="{% url 'MyToDoList:update-to-do' to_do.id %}">
                  Save
                </button>
                <button  hx-get="{% url 'MyToDoList:detail-to-do' to_do.id %}">
                  Cancel
                </button>   
          </div>
      {% else %}
                 <button  hx-post=".">
                  Save
                </button>
             </div>
      {% endif %}
  </form>
</div>

My main create form html..

<button  hx-get="{% url 'MyToDoList:create-to-do-form' %}" hx-swap="beforeend" hx-target="#bookforms">Add Form</button>

<div id="bookforms" ></div>

<div >

{% if to_dos %}

  {% for to_do in to_dos %}

    {% include "partials/to_do_detail.html" %}

  {% endfor %}

{% endif %}

After a day of playing and pulling my hair out..it's all working as I want...I just need to figure out how to incorporate a dynamic page load if anything changes so that the entire page gets reloaded....so that the records get sorted according to my number field...

Thanks in advance for any thoughts or suggestions.

CodePudding user response：

So thanks to a kind soul on Facebook....I added this Javascript to my code and it works.

$(document).on("click", ".yourclass", function(){
  location.reload();      
});

CodePudding user response：

In case you need this, I had the problem when I have to update two/mutliple parts of the page after post.

I manage to solve it by trigger_client_event

Thanks to this issue: How do I manually trigger a hx-get event of an element from JavaScript

HTMX rocks!