NS_Binding_Aborted error for ajax function

Question

I have a link on click of which a request should go to web server and on successful execution a redirection should happen. I have used ajax for this but I am getting NS_Binding_Aborted error in HTTpFox. The code:

<a id="lnkredirect" href="javascript:void(0);" onclick="myfunction();">Some text</a>

The ajax code:

function myfunction(){
 $.ajax({
       url: Web server Url,
       type: 'POST',
       datatype: 'JSON',
       timeout: 20000,
       data: null,
       success: function{ $("#lnkredirect").attr('href','redirection link...');},
       error : function{ $("#lnkredirect").attr('href','redirection link...');}
 )};
 return true;
}

The redirection is happening but I am getting NS_Binding_Aborted error in Firefox. In both success and error scenario, the redirection should happen but why NS_Binding_Aborted is coming, I am not sure of this. NS_Binding_Aborted error should come only if one event is cancelling some prior running event but I have already suppressed href of the link and redirecting it once the ajax request is executed, so there should be only one server call and NS_Binding_Aborted should not come. Please let me know where am I going wrong?

Natividad

Answer 1

I got a similar trouble, also while using both a href and a XmlHttpRequest inside a onclick. My XMLHttpRequest was aborted (ns_binding_aborted) and thus never reached status 200. I also could see that my XHR was "blocked by devtools" in Firefox console.

This was because the page was reloaded (by the href) before it could finish its job (what was in the onclick).

I had something like this:

<script type="text/javascript">
function incrementNumberOfDownloads() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) { // 4 = request ended, 200 = success
            //update displayed number of downloads
            document.getElementById("numberOfDownloads").innerHTML = this.responseText; 
        }
    };
    xhttp.open("GET", "incrementNumberOfDownloads.php", true);
    xhttp.send();
    return true;
}
</script>
<p id="numberOfDownloads">42</p>
<a href="files/myFileToDownload.zip" onclick="return incrementNumberOfDownloads();">Download my file !</a>

I fixed the problem by adding a target="_blank" to my download link, so that the page is no more reloaded when clicking, enabling the XMLHttpRequest to finish with success.

Kiloliter

Answer 2

In my case, one of my ajax call ended into a TIMEOUT before the page was fully generated.

    function ajax_fct(){
        $.ajax({
            type:   "POST",
            url:    "www.stackoverflow.com",
            beforeSend:function(){
                //
            },
            success: function(data){
                //
            },
            error: function (xhr, ajaxOptions, thrownError) {
                //
            },
            timeout: 3000 // <-- value to add / increase
        });
    }

I increased my timeout, giving to my server time to generate the ajax answer. Let's make it clear - this is not a good practice, but it will help you to debug & optimise your calculs.

Donalt

This was the root cause for me as well. – Amylaceous

Answer 3

This is caused by another request that abort your request. Generally when your goal is reload data o all page just end request and don'ts is synchronized request, a little novell error.
In this case the "return " sentence is the problem, the return sentence must be in success seccion.

Amaya

Answer 4

My issue fixed, when I've changed calling native js form submit event to jQuery submit event.

// this code
form[0].dispatchEvent(new Event("submit"));
// changed to
form.submit();

Nolasco