@rails-ujs How to intercept ajax:complete

Question

In a Rails 6.1 application using @rails/ujs (no jquery), I'm trying to intercept when ajax requests are fired and when they are completed.

I have added the following to my application.js

document.addEventListener("turbolinks:load", () => {
  document.addEventListener("ajax:send", () => {
    console.log('SEND')
  })
  document.addEventListener("ajax:complete", () => {
    console.log('COMPLETE')
  })
})

I correctly get SEND when I fire them, but when they end I don't get the (expected) COMPLETE.

Am I missing something here?

Have you tried ajax:done ? – Aniket Tiwari Dec 21 '21 at 05:48 — Aniket Tiwari, Dec 21 '21 at 05:48
Could you also show how do you send the ajax request? – kevinluo201 Dec 24 '21 at 06:36 — kevinluo201, Dec 24 '21 at 06:36
With a standard link_to … remote: true – Sig Dec 24 '21 at 07:58 — Sig, Dec 24 '21 at 07:58

score 0 · Answer 1 · answered Dec 24 '21 at 12:06

I have some personal ideas to investigate this kind of bug.

clue: the SEND worked properly as it was printed in the console (Make sure there is no error message in the console)
idea: open the Network tab and check if the request is pending.

Because ajax:complete will fire no matter what result in the server responses, so we can use that to find the next step.

situationA: the request is pending.
nextStep: try to find out why the request stuck on the server-side

situationB: the request responses but the event still does not fire
nextStep: try to find if there are any scripts already listening to the rails-ujs events

ajax:success
ajax:error
ajax:complete

and call event.preventDefault() inside. You can also open the Source tab and check the checkboxes to add break points at some specific XHR-related events:

error
load
loadend

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#events

And try to find whether there is any errors there or call event.preventDefault()

I tested your code and it worked fine on my machine, so I just want to give you some ideas for reference.

@rails-ujs How to intercept ajax:complete

1 Answers1