appending jQuery UI (SC 2)

richVIE

Hey everybody!

I am currently using jQueryUI by simply putting it entirely into Story JavaScript. In order to keep it more tidy, I tried to append jQueryUI from a CDN using TME´s suggestion in this post.

Here is what I used:

(function ($) {
	
	$(document.head)
		.append('<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>');
})(jQuery);

These are the first lines of code in the StoryJavascript, everything else goes below. I get a fatal error (unexpected token). What am I doing wrong?

greyelf

Change the start/end script tag pair to a self closing tag like so:

(function ($) {
$(document.head)
.append('<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"; />');
})(jQuery);

note: I had to use quote instead of code markup to stop an invalid semi-colon being added to the URL, this unfortunately removes indentation.

TheMadExile

Hmm. Apparently the closing </script> tag within the string literal is being taken as the closing tag of the Story JavaScript block now. I could swear that used to work correctly—the thread you linked isn't the first or only time that construct has been offered up.

Well, we can work around that little problem. Change your code to something like the following:

(function ($) {
	$(document.createElement('script'))
		.attr({
			id   : 'script-jquery-ui',
			type : 'text/javascript',
			src  : 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'
		})
		.appendTo(document.head);
})(jQuery);

NOTE: I do suggest using an ID, as the example from the thread you linked does, so I added one. I also changed the URL to use the latest version of jQuery UI—if you actually need the older 1.11.4 version, simply change the URL back.

richVIE

Thanks guys, both methods work!

Can I bug you with another issue? I tried to append the jQuery UI touch punch the same way, so the beginning of my Story Javascript reads

(function ($) {
	$(document.createElement('script'))
		.attr({
			id   : 'script-jquery-ui',
			type : 'text/javascript',
			src  : 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'
		})
		.appendTo(document.head);
})(jQuery);

(function ($) {
	$(document.createElement('script'))
		.attr({
			id   : 'jQuery UI Touch Punch',
			type : 'text/javascript',
			src  : 'http://deutschdetektiv.net/exp/jquery.ui.touch-punch.min.js'
		})
		.appendTo(document.head);
})(jQuery);

Twine file doesn't show any errors when displayed on a desktop computer, but when opened on my mobile phone, I get an fatal error: Uncaught TypeError: Cannot read property 'mouse' of undefined.

Could that be a scope issue?

TheMadExile

First. I'd recommend using a sane ID and pulling it from a CDN, rather than from the German Detective website—unless that's your website or something, however, I'd still recommend the CDN.


Assuming that there are no version conflicts, the most likely cause of your issue is probably that the Touch Punch add-on was being loaded before jQuery UI itself in the instance where you saw the error—due to asynchronicity issues. The solution is to synchronize its loading with jQuery UI's.

The following code should work in everything save older versions of IE:

(function ($) {
	$(document.createElement('script'))
		.appendTo(document.head)
		.on('load', function () {
			$(document.createElement('script'))
				.appendTo(document.head)
				.attr({
					id   : 'script-jquery-ui-touch-punch',
					type : 'text/javascript',
					src  : 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'
				});
		})
		.attr({
			id   : 'script-jquery-ui',
			type : 'text/javascript',
			src  : 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'
		});
})(jQuery);

richVIE

Works like a charm now, thank you - as always - also for the thorough explanation. The concept of "sane" was totally unknown to me.