Race condition on first run causes disabled UI

[irnc]

Sometimes message listener inside iframe's map.js module is added after message is sent from exercise.js (almost constantly reproducible in incognito mode). This race condition causes message not processed and thus callback not called. The callback is essential to UI as it removes disabled state from Run Query button.

Analysis

First we send answer query, on response we set answer received flag and update map, which sends a second query, that time using code from the editor. https://github.com/osmlab/learnoverpass/blob/be374273f87be8be3324dfc7c12d5ef4439a2cb9/themes/src/scripts/exercise.js#L21-L22 https://github.com/osmlab/learnoverpass/blob/6ffcbd792eee7e80251fa6693e058e49e9a703a9/themes/src/scripts/exercise.js#L24-L32 https://github.com/osmlab/learnoverpass/blob/6ffcbd792eee7e80251fa6693e058e49e9a703a9/themes/src/scripts/components/docs-repl.js#L113-L118

Response from that second query activates UI, in particular the Run Query button. Without this button it is not possible to send query again, so there is no workaround for this issue.

https://github.com/osmlab/learnoverpass/blob/6ffcbd792eee7e80251fa6693e058e49e9a703a9/themes/src/scripts/exercise.js#L35-L44

Root cause

Message listener inside iframe's map.js module is added on $.ready handler. Message is sent from exercise.js from iframe's onload handler.

load event is first fired in iframe context, and only then in parent, i.e. LearnOverpass. But because $.ready handler is called asynchronously, listener is added after message is posted, causing message going unprocessed.

$.ready handler is called asynchronously starting jQuery 3.0.0 released June 9, 2016. This was a breaking change, so issue started to manifest itself only after overpass-turbo's map switched to jQuery ^3.0.0 at February 6, 2018.

[irnc]

Workaround

Until this issue is fixed, please use LearnOverpass in non-incognito mode and refresh page when Run Query button is disabled on initial page load.