getting a NS_BINDING_ABORTED error for simple GET request

Question

Why am I getting this error?

Here is a screenshot of my Network tab in Firefox showing the NS_BINDING_ABORTED

I had a look over in this thread here NS_BINDING_ABORTED Shown in Firefox with HttpFox but I have no clue what its talking about at all...

Can someone please help me out here?

Thanks

$(function() {
  let userName = null;
  let userStatus  = null;

  $("#search").on("click", function() {
    userName = $("#username").val();
    apiCall();
  });
  
  $(".dropdown-menu a").on("click", function() {
    $("button.dropdown-toggle").text($(this).text());
    userStatus = $("button.dropdown-toggle").text();
  });

  function apiCall() {
    if (userName !== null && userStatus !== null) {
      var api = `https://api.jikan.moe/v3/user/${userName}/animelist/${userStatus}`;
      fetch(api, {
        method: "GET",
        headers: {
          Accept: "application/json",
        },
      })
      .then(response => response.json())
      .then((data) => {
        console.log(data)
      })
      .catch((error) => {
        console.log(error);
      })
    }
  }
});

Answer 1

I had the same problem in a $.get() ajax call. It was inside a function fired from a button inside a form. I moved the button outside the form tags and the problem disappeared.

Answer 2

Is your #search element an HTML submit button? Similar to Marco S. answer, we ran into this when our button was inside the form. Moving it outside the form tags worked. But, then we found that Firefox didn't like the button being type="submit" when inside the form. We changed the button to: type="button" and it fixed the issue....even when inside the form tags.