This event is triggered after an AJAX request has finished, either in the case of a successful request (although one that may have returned a remote error code such as a 404) or in a network error situation<\/em><\/p>\n Combined with the failed<\/strong> event detail, we can determine whether the response was successful or not. If not, we can implement code to handle the failure accordingly. In the basic example below, an alert is displayed if a failure occurs; however, this could easily be replaced with more robust error handling:<\/p>\n Sometimes in football, a more complex offensive play can have several \u201csteps\u201d as the team attempts to move the ball forward. An example of this would be something like a \u201creverse\u201d where the quarterback hands the ball off to a player running in one direction, who then, in turn, hands the ball off to another player running in the opposite direction. Similarly, there are situations in which a developer may need to \u201cchain\u201d requests, where upon reception of a response from one request, another request is subsequently issued (i.e. the application flow is handed off between distinct endpoints). An example we recently faced was the need to utilize an existing Flask route without modifying the endpoint or its response but ultimately pass back a custom response targeting parts of the UI (User Interface) for refresh. After making the initial HTMX request, we could intercept the response from that first endpoint and then kick off a subsequent ajax request to a secondary endpoint that would target a refresh of the necessary UI components. Below is a generic example illustrating how this can be accomplished using HTMX custom extensions.<\/p>\n In the front-end code, we use standard HTMX attributes to post a request to the initial endpoint: The first thing to note is that the hx-swap attribute is set to \u2018none\u2019. This ensures that the response content is not appended to the DOM (Document Object Model). Secondly, we have included the hx-ext attribute to name our custom HTMX extension. This is used to identify the extension definition in our JS code.<\/p>\n Below is the JS definition of the HTMX extension that we created. Again, we were able to leverage an HTMX event to intercept the response from the first endpoint, parse it and then execute another HTMX request to the secondary endpoint. For this particular piece of code, we used the htmx:afterOnLoad<\/strong> event to intercept the response. Per the documentation<\/a>:<\/p>\n This event is triggered after an AJAX onload has finished. Note that this does not mean that the content has been swapped or settled yet, only that the request has finished.<\/em><\/p>\n Since we don’t need or want to update the DOM with the response from the first request, we can intercept it using this event type.<\/p>\n In the extension definition example below, we have an onEvent<\/strong> listener listening for the htmx:afterOnLoad<\/strong> event. When that is returned successfully, we issue an HTMX ajax call to the second endpoint targeting the UI components to be refreshed (in this case it\u2019s the #search-results element) effectively chaining the two requests back-to-back.<\/p>\n When a football coach finds that a particular type of play isn\u2019t working or isn\u2019t appropriate for the current down and distance, they might try using a different type of play. For example, if running the ball isn\u2019t working well, they may choose to try and pass the ball through the air instead, particularly if they have a large distance still to cover since it\u2019s better suited for that situation. In the case of providing file downloads to users, there are, of course, different ways to accomplish this. One of the easiest is to simply provide a link to the file location using basic HTML (Flask example below): In many cases, this implementation may be totally adequate. However, what if you want to display an indicator while the report is generating or provide improved error handling if report generation fails? In this case, you may want to switch up the implementation and leverage HTMX attributes and events to handle the file download since it is better suited for those types of situations. The example below is based off a great post by Martin Mohnhaupt over on Medium.com<\/a> where he does just that, albeit with a few of our own minor tweaks.<\/p>\n First, the button is created on the front-end using attributes to define the HTMX post configuration: Like our last example, we have set the hx-swap<\/strong> attribute to \u201cnone\u201d so that the response does not impact the DOM in any way. The hx-ext<\/strong> is also set to identify the name of the extension in our JS definition code and lastly, we have added the hx-indicator<\/strong> to identify the \u201cloading\u201d element in our UI that will be displayed as the report generates.<\/p>\n Also of note, the \u201c\/export\u201d endpoint generates the report content and then sends the bytes using an in-memory bytes buffer to the client as part of the response:<\/p>\n Once again, when the response is sent, we intercept it using the htmx:afterOnLoad<\/strong> event in our JS HTMX extension definition. Assuming that the response is successful, the headers and content are parsed to retrieve the necessary data for download including the filename and MIME type. Next, a hidden link element is created and given attributes populated with the parsed information. To ensure that there are no issues with the href content, we encode the response payload binary data to base64 using the built in JS btoa function. Lastly, the newly created link element is clicked programmatically, prompting the download in the client and then removed from the DOM since it is no longer needed for this specific download.<\/p>\n\r\n1. document.addEventListener('htmx:afterRequest', event => {\r\n2. if(event.detail.failed){\r\n3. alert(\"Error - Please contact an administrator\")\r\n4. }\r\n5. })\r\n<\/code><\/pre>\nExample 2 \u2013 HTMX Request Chaining<\/h2>\n
Part 1 (Initial Request)<\/h3>\n
\n![\"\"](\"https:\/\/www.simplethread.com\/wp-content\/uploads\/2025\/09\/click-me-1024x229.jpg\")
<\/p>\nPart 2 (Interception and Secondary Request)<\/h3>\n
1. htmx.defineExtension('htmx-project-reload', {\r\n 2. onEvent: function (name, evt) {\r\n 3. if(name == 'htmx:afterOnLoad'){\r\n 4. const status = evt.detail.xhr.status;\r\n 5. if(status == 200){\r\n 6. htmx.ajax('POST', '\/second_endpoint',\r\n 7. {target: '#search-results', indicator: '#loading-message'}\r\n 8. )\r\n 9. }\r\n10. }\r\n11. return true;\r\n12. }\r\n13. })\r\n<\/code><\/pre>\nExample 3 \u2013 File Download<\/h2>\n
\n![\"\"](\"https:\/\/www.simplethread.com\/wp-content\/uploads\/2025\/09\/download-1024x95.jpg\")
<\/p>\nPart 1 (Initial Request)<\/h3>\n
\n![\"\"](\"https:\/\/www.simplethread.com\/wp-content\/uploads\/2025\/09\/button-1024x342.jpg\")
<\/p>\n1. with open(\"report.csv\", \"rb\") as file:\r\n2. file_contents = file.read()\r\n3. return send_file(BytesIO(file_contents), as_attachment=True, download_name=\"report.csv\")\r\n<\/code><\/pre>\nPart 2 (Interception and file download)<\/h3>\n
1. htmx.defineExtension('htmx-download', {\r\n 2. onEvent: function (name, evt) {\r\n 3. if(name == 'htmx:afterOnLoad'){\r\n 4. const status = evt.detail.xhr.status;\r\n 5. if(status == 200){\r\n 6. const response = evt.detail.xhr.response;\r\n 7. const headers = get_headers(evt.detail.xhr);\r\n 8. const filename = headers['content-disposition'].split('=')[1];\r\n 9. const mimetype = headers['content-type'];\r\n10. \r\n11. const link = document.createElement(\"a\");\r\n12. link.style.display = \"none\";\r\n13. link.href = `data:${mimetype};base64,${btoa(response)}`;\r\n14. link.download = filename;\r\n15. \r\n16. document.body.appendChild(link);\r\n17. link.click();\r\n18. \r\n19. setTimeout(()=>{\r\n20. URL.revokeObjectURL(link.href);\r\n21. link.parentNode.removeChild(link);\r\n22. }, 100);\r\n23. }\r\n24. }\r\n25. return true;\r\n26. }\r\n27. })\r\n<\/code><\/pre>\n