8

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);
      })
    }
  }
});
Geo P
  • 97
  • 1
  • 6

3 Answers3

5

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.

Marco S.
  • 121
  • 1
  • 5
4

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.

CFMLBread
  • 544
  • 2
  • 7
3

If the button is submit button inside form then inside onclick handler function we should put event.preventDefault() before making any fetch request or (apicall())

Nishant
  • 31
  • 1
  • 1
    Welcome to Stack Overflow! This indeed looks like a good solution. Please provide an example and maybe a small explanation (or link to one) to increase the use of your answer. Thanks! – Kerwin Sneijders May 11 '21 at 09:54
  • to add to this, I used the docs here: https://bootstrap-vue.org/docs/components/form and the first line of the method was event.preventDefault(). Basically the browser is trying to submit the form, and the preventDefault() tells it not to and just to let vue handle it – morgan121 Mar 09 '22 at 06:44