Re: [MediaWiki-l] Embed JavaScript via an extension

Hi Sigbert, Depending on the complexity of the javascript involved, I'd recommend one of these two approaches. == More future proof, scalable == Put the ` $( '#slider' ).slider() ` code in a separate javascript file (e.g. extensions/Rslider/modules/ext.rslider.js), register that as a ResourceLoader module[1] named 'ext.rslider', with dependency on 'jquery.ui.slider'. Then from your parser tag callback, don't add the <script> and <div>. Instead you'd add only the <div>, and then call `addModules( 'ext.rslider' ); `. [2] Since it is now in a separate file, be sure to hook into $(document).ready instead of directly querying ` $( '.mw-Rslider-tag' ) ` as the element might not exist yet. Or better yet, use mw.hook( 'wikipage.content' ) [3] instead of $(document).ready [4], that way your tag will also work in live preview and other environments that reload wikipage content without a complete document refresh. You'd end up with (pseudo-code): Rslider.php: modules['ext.rslider'] => { scripts: 'modules/ext.rslider.js' dependencies: 'jquery.ui.slider' localBasePath: ___DIR__ remoteExtPath: 'Rslider' } modules/ext.rslider.js: mw.hook( 'wikipage.content', function ( $content ) { $content.find( '.mw-Rslider-tag' ).slider(); } ); Rslider.hooks.php#onParserHookRslider: $parserOutput->addModules( 'ext.rslider' ); return '<div class="mw-rslider-tag"></div>'; == Simple way == If you're absolute sure that there will only ever be 1 instance of <Rslider> on the page, then you could go with the inline <script> approach without having any ResourceLoader modules, however in that case keep the following three things mind (one of these is why your code didn't work): * Put the <script> tag after the <div> not before. Otherwise the element will not yet exist when $() tries to query it. * The mw.loader.using() statement you have is correct, don't remove it as you'll need it. jquery.ui might happen to be on the page already, but this is by no means a guarantee (it'd be pure luck, depending on whether some other extension requests it, it is not loaded by default). mw.loader takes care[5] never to request the same module twice, so don't worry about using it twice. * Wrap your inline <script> contents in ` if ( window.mw ) { .. }` so that there won't be a fatal javascript exception on the page if MediaWiki's startup module decides to serve the user a lightweight page without mediawiki and jquery modules (e.g. for older browsers). You'd end up with: Rslider.hooks.php#onParserHookRslider: $html = '<div class="mw-rslider-tag"></div>'; // This creates <script>if(window.mw){ ... }</script> and automatically escapes any html // or xml characters inside the script if needed for this page. $html .= Html::inlineScript( ResourceLoader::makeLoaderConditionalScript( 'mw.loader.using( \'jquery.ui.slider\', function () { $(\'.mw-rslider-tag\').slider(); });' )); return $html; -- Krinkle PS: This has been an early Christmas present. Happy Holidays! [1] https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoade…

https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoade…

https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook-event-wik…

[5] https://www.mediawiki.org/wiki/ResourceLoader/Features On Tue, Dec 17, 2013 at 10:24 AM, Sigbert Klinke &lt;sigbert(a)wiwi.hu-berlin.de&gt;wrote;wrote: Hi, in my extension I would like to use the slider from jquery.ui . Therefore I created a tag <Rslider /> to show the slider. It translate in a wiki page to <script>mw.loader.using( 'jquery.ui.slider', function() { $( "#slider" ).slider(); });</script><div id="slider"></div> As I understand I do not need to use ResourceLoader at all since I want to use just a standard element of jquery.ui . However, the slider does not show up which means I'am doing something wrong :( Thanks for any help Sigbert _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l