jQuery is broken and I'm getting this error "Synchronous XMLHttpRequest"

Question

I am new to Angular and I'm experiencing some issues. If I click any JavaScript element, I get this error:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

which relates to this function from jQuery

function rapport_nikko_send_focus_event(element_)
{
   try
   {
      var req = new XMLHttpRequest();         
      req.open('GET', rapport_nikko_get_xhr_url('focus_change' , 'frame_id=1&focused=true&event_magic=DE3EEC717983&'+rapport_nikko_get_element_data(element_)),false);                    
      req.send();
   }
   catch(err)
   {       
   }       
}

I read HERE that I'm having this issue because of a synchronous XMLHttpRequest. but I'm loading the jQuery.min.js file like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

So I don't know how to change it to asynchronous

Also, my JavaScript events aren't triggering.

this button in my header

<button id="calendarButton">Calendar</button>

doesn't call this function in script.js

$(document).ready(function() {
    $('#calendarButton').click(function(){
        console.log("in");   //Not working
        alert("in");  //Not working
    });
});

All files are included

I guess you're right. this question doesn't involve angular specifically, but I thought it might have something to do with angular because this isn't an issue I had before I started with angular today — Nate May, Oct 29 '15 at 23:04
If you are using jQuery anyway, then why are you using raw `XMLHttpRequest` objects? The jQuery wrappers `ajax`,`get`, and `post` are about 10 times more convenient and fix your issue as a nice side effect. — Tim Seguine, Oct 29 '15 at 23:14

score 1 · Answer 1 · answered Oct 29 '15 at 22:55

1

So I don't know how to change it to asynchronous

The third argument to open determines if it is asynchronous or not. Remove it.

answered Oct 29 '15 at 22:55

Quentin

914,110
126
1,211
1,335

how do I change it if I include it like this: `` – Nate May Oct 29 '15 at 22:57
You aren't loading it like that. That function doesn't appear anywhere in that file. – Quentin Oct 29 '15 at 22:58
You're right. my mistake. Do you know where it is then? my dev tool shows "VM1449" as the file. That's not a file I created – Nate May Oct 29 '15 at 23:01
[Google gives clues](https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#q=rapport%20nikko&es_th=1). You appear to have [this](http://www-03.ibm.com/software/products/en/trusteer-rapport) installed. – Quentin Oct 29 '15 at 23:04

score 1 · Answer 2 · answered Oct 29 '15 at 23:04

Your issue is with req.open(GET,'..',false); The third argument exists for legacy reasons but doing a synchronous request has been deprecated. To compensate for this, you need to create an event handler for req.onreadystatechange, which will fire whenever req recieves a status update. This listener should check the status and readystate properties and act accordingly upon them; that is, it should check to see if the response has been completed, and if so, do whatever you need to occur after loading it.

an example of how asynchronous requests work is available at w3schools, and looks like the following:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  }
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

No need for onreadystatechange here. The point of the code is to *send* data. The response is ignored. (`req` drops out of scope without `responseAnything` being touched) — Quentin, Oct 29 '15 at 23:08
Well there you go then; set the async value to true and let the code do its thing. Just want to make sure he understands the point of asynchronous requests is that the code DOES NOT wait for the response. — Josh Doebbert, Oct 30 '15 at 15:54

score 1 · Answer 3 · answered Oct 29 '15 at 23:09

1

To me it seems like a third party tool or may be some chrome add-on, named "Rapport", is the problem here. I have no idea what Rapport or NIkko is.

But good chances are that if you disable the add-on or remove the software, it should work properly.

answered Oct 29 '15 at 23:09

Ash

2,575
2
19
27

perhaps this: http://stackoverflow.com/questions/3707893/asp-net-in-chrome-getting-a-strange-focus-change-nikkomsgchannel-error – Ronnie Oct 29 '15 at 23:13

jQuery is broken and I'm getting this error "Synchronous XMLHttpRequest"

3 Answers3