13

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
  • 157
  • 1
  • 2
  • 8
  • Just to add a data point here, I began seeing NS_BINDING_ABORTED when developing a web application locally and accessing 127.0.0.1. For some reason Ad Block Plus would not allow me to disable it for the localhost nor 127.0.0.1, but I was able to make the error messages to away by disabling the plugin. – dctucker Jun 21 '22 at 15:38

4 Answers4

10

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.
  • 171
  • 1
  • 6
  • Awesome, So the issue was adding the button inside the form, after following your suggestion the issue gone with the wind. Thumbs up – Jodyshop Feb 02 '23 at 09:21
7

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
  • 71
  • 1
  • 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
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
  • 734
  • 3
  • 7
0

For me the solution was binding the click event on a <button> tag instead an <a> tag, inside the <form>. e.preventDefault() was not required.

roelleor
  • 443
  • 6
  • 11