Skip to content

[4.0.0-beta6] htmx.trigger('#id','htmx:abort') works only for requests made using hx-* attribute #3937

Description

@devseppala

I tried 4.0.0-beta6 on a small hobby project I'm developing and soon end up with issues while trying to abort a request. Turns out that htmx.trigger('#id','htmx:abort') does not work if the reguest was made from javascript and not directly from a attribute hx-get,hx-post... attribute.

Below is a PHP/html example that shows the problem.

  • update, keep the developer tools network tab open to see the issue.
----- /abort/sleep30s.php-----
<?php sleep(30); ?>
<div>Hello World</div>

-----/abort/htmx.html-----
<html>
  <head>
    <!--<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta6/dist/htmx.min.js"></script>
  </head>

  <body>
    <div>
      <button id="clickme" hx-post="/abort/sleep30s.php" hx-swap="outerHTML">Click Me</button>
      <button onclick="htmx.trigger('#clickme','htmx:abort')">abort works on v2 & v4</button>
    </div>
    <div>
      <button id="clickmeJs2" onclick="htmx.ajax('GET','/abort/sleep30s.php',{target:'#clickmeJs2',source:'#clickmeJs2'});">Click Me</button>
      <button onclick="htmx.trigger('#clickmeJs2','htmx:abort')">abort works on v2 not v4</button>
    </div>
  </body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions