INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Synchronous XMLHttpRequest on the main thread

Synchronous XMLHttpRequest on the main thread

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

Quote:

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

RE: Synchronous XMLHttpRequest on the main thread

(OP)
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

RE: Synchronous XMLHttpRequest on the main thread

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

RE: Synchronous XMLHttpRequest on the main thread

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

Quote:

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....

CODE

$('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

RE: Synchronous XMLHttpRequest on the main thread

Quote:

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

BUT given this

Quote:

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

RE: Synchronous XMLHttpRequest on the main thread

(OP)
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....

CODE

<!-- 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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close