0

I've read a bunch of questions and answers about this, including this one JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..." which has a number of very different answers that give different specific causes. But I haven't found anything to explain why I'm seeing it for my case, which is as follows:

I went to this page for an example of implementing an upload progress bar, and downloaded the demo which is a small .zip file containing only 3 files which I put in my web root:

  1. index.php
  2. upload.php
  3. LoaderIcon.gif

The demo seemed to work okay as-is (except it displays the form a second time after submit). But it gets jQuery from the cdn, while I've always hosted the javascript I use on our own site.

So I downloaded https://code.jquery.com/jquery-2.1.1.min.js to the /js directory below my web root, and changed the script tag in the index.php file to read src="/js/jquery-2.1.1.js" instead of src="https://code.jquery.com/jquery-2.1.1.min.js". Absolutely no other changes.

This single change triggers the XMLHTTPRequest warning. Some of the answers I've seen note that an ajax request inserting a <script> tag into the html for a page will trigger the warning, but that's definitely not happening here. I tried changing src="/js/jquery-2.1.1.js" to src="http://localhost/js/jquery-2.1.1.js" but that did not help. The only ways I found to get rid of the warning (other than trying to suppress it) were to load jquery from a different domain, or copy-paste the content of jquery-2.1.1.js between <script> tags in index.php.

Can anyone explain why this happens, and suggest a way to avoid the problem while still hosting the script on my own site?

sootsnoot
  • 2,178
  • 3
  • 22
  • 27
  • I suspect it's getting an error loading jQuery from your server. There's a polyfill in `index.php` that uses synchronous XMLHttpRequest if `$.parseXML` can't be found. – Barmar Sep 08 '17 at 20:16
  • See the definition of `var toXml` in http://malsup.github.io/jquery.form.js – Barmar Sep 08 '17 at 20:18
  • @Barmar - Interesting find! But that code is within the inline version of jquery.form.min.js that is contained in the index.php file. I changed that inline script to use the unminified version from the cdn: `` and set a breakpoint on that line - it did not trigger. The line that's causing the warning is 'xhr.open( options.type, options.url, options.async, options.username, options.password );', which is line 8554 of the non minified version of jQuery, https://code.jquery.com/jquery-2.1.1.js. – sootsnoot Sep 09 '17 at 02:08
  • But it happens the 2nd time that that line is encountered. I think what's happening is that jquery is somehow getting loaded twice within the same request that gets triggered by clicking submit. I'm really not comfortable yet with following javascript flow. In reading code, it looks like clicking the submit button should display the image that was uploaded just below the form, but instead it adds more divs to the page displaying the form that duplicates the form below it. I was hoping that having the script come from the same host causing the problem would trigger an answer... – sootsnoot Sep 09 '17 at 02:49
  • There's nothing special about loading the script from the same host as the web page. – Barmar Sep 09 '17 at 04:21
  • There's one place in jquery itself where it uses `async: false`: line 8321, part of the definition of `jQuery._evalUrl`. This is part of the code for appending HTML to the DOM, which is used when the HTML includes a ` – Barmar Sep 09 '17 at 04:31
  • @Barmar - Thanks! I set a breakpoint there (actually at 8317, which is the call to jQuery.ajax() that passes an object with url: jquery-2.1.1.js, async: false) and indeed it does trigger. But I can step past it without getting the Deprecation notice on the console. With a breakpoint on the xhr.open at line 8554, the first time it triggers with a url of http://localhost/upload.php, and I can step past it okay. But the second time it triggers the url is http://localhost/js/jquery-2.1.1.js, and stepping over it causes the Deprecation notice. – sootsnoot Sep 09 '17 at 17:56
  • @Barmar - Thanks for your patience. I haven't got to the very bottom of this, but I found out that I'm causing the problem myself with something in my site's configuration. I took the original demo files and moved them to a different web root directory, and the demo worked perfectly, without displaying a second form after the submit. Then I edited the script tags for jquery-2.1.1 and jquery.form to use a src url specifying a location below that web root, and all worked fine without the Deprecation notice. So it's of my own doing, not the demo and not jquery. I'll post an answer when/if found! – sootsnoot Sep 09 '17 at 18:12

1 Answers1

0

Stupid user error, I regret having posted the question without due diligence in identifying all relevant pieces of the environment!

Barmar was very patient with his helpful comments tracking down the problem as I reported it. But it turned out I had created the problem myself with my .htaccess file. I had plopped the demo files into the web root of a Zend Framework application I'm working on, carelessly thinking that would be the simplest way to check out the demo. But that made the demo's index.php the index.php for the ZF application, which is where the .htaccess file redirects all requests that are not for existing image files! This created the bizarre behavior both for the duplicated form and the Deprecation notice. Removing that .htaccess file let the demo work flawlessly. And changing the demo to fetch the jquery-2.1.1.js and jquery.form.js files from localhost did not provoke the Deprecation notice.

I sincerely apologize for wasting people's time. I'm usually more careful about describing the complete environment, but since this had nothing to do with Zend Framework, I omitted that detail!

sootsnoot
  • 2,178
  • 3
  • 22
  • 27