Synchronous XMLHttpRequest on the main thread 1

[1DMF]

I have started to get the following warning appear in the console using JQuery 1.7.1

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help

http://xhr.spec.whatwg.org/

Why is this happening, where is it coming from and how do I track it down and get rid of it?

Thanks,
1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[ChrisHirst]

Assuming Firefox,

https://bugzilla.mozilla.org/show_bug.cgi?id=969671

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

Yes, but I don't understand the link you provided.

Are you saying this is a bug and I just ignore it?

Why has it suddenly started to show?

What in my code am I doing that may have triggered this?

If it's bad I want to stop 'IT', I just don't know what 'IT' is?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[ChrisHirst]

The WhatWG document is more use that the FireFox "social group" waffling. Nobody ever seems to get to the point in their "bug reports", it always seems to be a contest of who can be more "nerdy" without saying anything actually useful. Most of them would make 'good' politicians.

But basically, ... If you set the async parameter to 'false' you will probably get that warning.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

I find quite a few of these sites difficult to locate the nugget of gold you are looking for!

But basically, ... If you set the async parameter to 'false' you will probably get that warning.

I wasn't aware I was, I haven't used any async arguments on any of my JQuery AJAX calls, I thought the whole point of AJAX was in the Acronym, Asynchronous Javascript And Xml?

However, I have tracked down what is triggering the warning as I was typing this....

$('head').append('<script src="<tmpl_var name="url_to_domain">\/scripts\/jquery.dataTables.min.js" type="text\/javascript"><\/script>')

I have a template that I use to inject the data tables 'widget' so it can easily be placed on various pages throughout the app.

So I guess dynamically adding content to the 'head' to load JS / CSS resources is bad?

I refactored so it could be placed directly in the head without the need for JQuery and the warning has gone away.

What's best practice for loading dynamic resources?




"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[ChrisHirst]

So I guess dynamically adding content to the 'head' to load JS / CSS resources is bad?

Not necessarily.

BUT given this

I refactored so it could be placed directly in the head without the need for JQuery and the warning has gone away.

Seems to indicate that jquery is doing something different and making the call synchronous.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

It was definitely originating from JQuery, perhaps it's the fact I'm using an older version 1.7.1 and the way it appends stuff to the head.

Though I'm not sure how $.append is firing AJAX? You don't use AJAX to download files?

OK JS / CSS is just text, but still I asked JQuery to append a tag to the head not make an AJAX call?

Here is the entire code I was putting in the head....

<!-- SCRIPT -->
<script type="text/javascript">
    
    // <![CDATA[
       
        if($.fn.dataTableExt == undefined)
        {
           $('head').append('<script src="<tmpl_var name="url_to_domain">\/scripts\/jquery.dataTables.min.js" type="text\/javascript"><\/script>')
                    .append('<script src="<tmpl_var name="url_to_domain">\/scripts\/ColReorderWithResize.js" type="text\/javascript"><\/script>')
                    .append('<link rel="stylesheet" type="text\/css" href="<tmpl_var name="url_to_domain">\/style\/data_tables.css" \/>'); 
    
            // UK date sort bug fix
            jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
                var ukDatea = a.split('/');
                var ukDateb = b.split('/');
            
                var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
                var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
            
                return ((x < y) ? -1 : ((x > y) ?  1 : 0));
            };
            
            jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
                var ukDatea = a.split('/');
                var ukDateb = b.split('/');
            
                var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
                var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
            
                return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
            };
            
        }        

        
    // ]]> 
    
</script>

The point was as some templates want to use datatables and I may include that template in a template already using datatables, I didn't see the point in reloading the resources, however, the browser was moaning about the async calls.

Not sure how I get round this, if I can't dynamically load resources into the head with JQuery, it means this base template must always be put in the head, which doesn't make it a useful as I'd hoped.

I guess the scripts could be injected into the body instead along with the CSS with a style tag and import directive?



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music