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_ResourceLoader... [2] https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader... [3] https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook-event-wiki... [4] https://api.jquery.com/ready/ [5] https://www.mediawiki.org/wiki/ResourceLoader/Features
On Tue, Dec 17, 2013 at 10:24 AM, Sigbert Klinke sigbert@wiwi.hu-berlin.dewrote:
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1
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 -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.11 (GNU/Linux) Comment: Using GnuPG with Thunderbird - http://www.enigmail.net/
iQEcBAEBAgAGBQJSsBg5AAoJEBgNLCKL5DEWcksIAK6ck38aRTFKcZzoKUc3gtdk MlLBsbgbp4I3CyXxb8Q8eBBHl/JB5WJVB6G3OQcjKOKiKoH9gm9G8RWxKsWymtzh Tywr3N/vflyIGzRccAu2IZimvkzSOo0xIhIsHcJHhCqYewZfg9cWyiOyGY2gX1VO vDgoQrH7QCH8L2wKeq69eKGywDMfVdSPZx/2WfKQG2UXgoD+6M2BBXjLiw1M9ha4 N0d9Vd0+UVaVUhZ7UBwgCDe716tnsTkVQ8IpdaDUG/YKkxF394+c5dqhLC2ixhNz ZlWaV6QufqTBn9uFVKahFy/6EjQoU+gFCtJD2ID7XmnA1TYZTCXR71yZh6wjyzk= =1xLn -----END PGP SIGNATURE-----
MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l