I’m working on a Django project where I need to call two different views when clicking a single button using HTMX.

Scenario: First, I need to send a POST request to edit a task (edit_positions_tasks view). After the first request completes, I need to send a GET request to create a task (create_position_tasks view). The second request should only execute after the first request is successfully processed. Current Code:

<button 
    hx-post="{% url 'hrm_tenant:edit_positions_tasks' task.id %}" 
    hx-target="#task_{{ task.uuid }}" 
    hx-swap="outerHTML"
    hx-on::after-request="htmx.ajax('GET', '{% url 'hrm_tenant:create_position_tasks' empty_position.id %}', {target: '#task_table', swap: 'beforeend'})"
>
    Update
</button>

Problem: The first POST request works correctly and updates the task. However, the GET request to create_position_tasks doesn’t seem to fire or execute properly after the first request finishes. What I Need Help With: Is my approach correct for chaining two requests in HTMX? If not, what is the recommended way to ensure the second request only fires after the first one completes successfully? Are there better ways to handle this in HTMX or JavaScript? Any insights would be greatly appreciated!

I’m working on a Django project where I need to call two different views when clicking a single button using HTMX.

Scenario: First, I need to send a POST request to edit a task (edit_positions_tasks view). After the first request completes, I need to send a GET request to create a task (create_position_tasks view). The second request should only execute after the first request is successfully processed. Current Code:

<button 
    hx-post="{% url 'hrm_tenant:edit_positions_tasks' task.id %}" 
    hx-target="#task_{{ task.uuid }}" 
    hx-swap="outerHTML"
    hx-on::after-request="htmx.ajax('GET', '{% url 'hrm_tenant:create_position_tasks' empty_position.id %}', {target: '#task_table', swap: 'beforeend'})"
>
    Update
</button>

Problem: The first POST request works correctly and updates the task. However, the GET request to create_position_tasks doesn’t seem to fire or execute properly after the first request finishes. What I Need Help With: Is my approach correct for chaining two requests in HTMX? If not, what is the recommended way to ensure the second request only fires after the first one completes successfully? Are there better ways to handle this in HTMX or JavaScript? Any insights would be greatly appreciated!

• javascript
• django
• ajax
• htmx

• Are both requests making changes on the template ? How long do the requests take to finish ? – Arif Rasim Commented Feb 7 at 13:18
• Yes, both requests making changes on the template. It takes 1 second or less – Giorgi Khomasuridze Commented Feb 7 at 15:15
• After editing the task in edit_positions_tasks, just redirect to create_position_tasks. Will that not work? Or you have specific functionality you want to achieve? – McPherson Commented Feb 7 at 18:30
• Can you confirm if the 2nd request is being fired? (check the network tab in devtools). Also what are you trying to achieve with the 2nd request? – yalow Commented Feb 7 at 21:44
• I'm trying to trigger the edit view when the edit button is clicked. After that, I want to call the create view's GET method to display an empty form with empty fields. I do not want to use a redirect because all this functionality must work without a page refresh. – Giorgi Khomasuridze Commented Feb 8 at 21:52

2 Answers 2

This is a way you can handle firing an htmx request after another finishes.

In the POST of your edit view add a header:

request.META["HX-Trigger"] = "triggerCreateView"

To listen to the trigger, add an element that looks something like this (needs the hx-trigger)

<div
hx-get= "{% url 'hrm_tenant:create_position_tasks' empty_position.id %}" hx-target='#task_table' hx-swap='beforeend' hx-trigger='triggerCreateView from:body'
>
</div>

This makes it that the 2nd request is only triggered after the return of the 1st request because it's listening for the triggerCreateView

One option is to conditionally add a script tag if it's a response partial:

<button 
    hx-post="{% url 'hrm_tenant:edit_positions_tasks' task.id %}" 
    hx-target="#task_{{ task.uuid }}" 
    hx-swap="outerHTML"
>
    Update
</button>
<script>
    htmx.ajax(
        'GET',
        '{% url 'hrm_tenant:create_position_tasks' empty_position.id %}',
        {target: '#task_table', swap: 'beforeend'}
    )
</script>

Another option is to use an out-of-band element in the response that can trigger and swap itself:

<table hx-swap-oob="beforeend:#task_table">
    <div
        hidden
        hx-get="{% url 'hrm_tenant:create_position_tasks' empty_position.id %}"
        hx-trigger="load"
        hx-swap="outerHTML"
    ></div>
</table>