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.

learnoverpass/themes/src/scripts/exercise.js

Lines 21 to 22 in be37427

	onload: function() {
	exercise.query(exerciseAnswer);

learnoverpass/themes/src/scripts/exercise.js

Lines 24 to 32 in 6ffcbd7

	onSuccessData: function(data){
	if(answer === null) {
	if( data.query === exerciseAnswer ) {
	answer = processAnswer(escapeHTML(data.resultText));
	exercise.updateMap();
	}
	return;
	}

learnoverpass/themes/src/scripts/components/docs-repl.js

Lines 113 to 118 in 6ffcbd7

	updateMap: function(){
	if(!pending_query) {
	pending_query = true;
	postTo(iframe, 'update_map', [cm.getValue()]);
	}
	},

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.

learnoverpass/themes/src/scripts/exercise.js

Lines 35 to 44 in 6ffcbd7

	if(firstRun) {
	firstRun = false;
	classie.add(editorCover, "hide");
	classie.remove(runBtn, "disabled");
	classie.remove(resetBtn, "disabled");
	// firstRun should not produce errors
	return;
	}

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.