Occasionally: $.ui.autocomplete is undefined

[gregmuellegger]

I just upgraded to 1.5.1 and tested locally, I reloaded the admin change page a couple of times and got in quite a few instances, the following error message:

That happens already on page load, before I focus the input.
Cache has been emptied and once in a while it works as expected. I assume that the autocomplete plugin is not loaded in time before the ajax-selects code is executed.

[crucialfelix]

I've been seeing this sporadically too in production.

It seems that window load event fires before all scripts are loaded.

caused by this change: dea4599

I'll do a fix shortly. Hopefully today.

[crucialfelix]

I am seeing this on our production server. Unfortunately I could never replicate it locally.

Locally, with a throttled connection:

jquery-ui is the last to load, and ajax_select.js doesn't run until the window 'load' event. No problem.

But what if jquery-ui arrives before jquery ? Then it has no jquery to register itself with.

Logically speaking what was missing was to set the two scripts to script.async = false;

https://www.html5rocks.com/en/tutorials/speed/script-loading/

Scripts that are dynamically created and added to the document are async by default, they don’t block rendering and execute as soon as they download, meaning they could come out in the wrong order. However, we can explicitly mark them as not async.

Therefore this should work:

var script = document.createElement('script');
document.head.appendChild(script);
// doesn't block rendering while downloading
// adds to sequential execution queue
// so they run after document is loaded
script.async = false;
script.src = src;

They should run one after another.

But in other situations there are a lot more scripts on the page and on one admin page I see up to 4 !!! jquerys. Oh dear.

At least on my site what happened is that jquery.ui arrived before the jquery 1.9.1 that ajax selects loads. jquery-ui found a window.jQuery, attached itself to that. But then when ajax_selects.js runs (at window 'load') it finds a different window.jQuery active and there is no .ui attached to that one.

So I've reverted to document.write which ensures that it blocks rendering, loads those two in the right order, then runs ajax_selects.js which sees the same window.jQuery. After that everything is isolated and it doesn't matter what everybody else does to window globals.

Going forward, I will switch to a build system that makes a single isolated bundle. Probably switch to select2 so it is smaller and has better ui. This will make releases easier and faster too.

The django admin is a jungle, it is best to stay out of it.

[crucialfelix]

For reference, this was the reason I tried to change from using document.write:

A Parser-blocking, cross-origin script, https://code.jquery.com/ui/1.10.3/jquery-ui.js, 
is invoked via document.write. This may be blocked by the browser if the device has 
poor network connectivity. 
See https://www.chromestatus.com/feature/5718547946799104 for more details.