User:Catrope/Wikimania/jQuery
About jQuery
[edit]jQuery is an open-source JavaScript library making dynamic web development easier. Documentation, examples and downloads can be found here.
Demonstrated in the talk
[edit]NOTE: All these examples assume that $ is the jQuery function. If it's not (on Wikipedia it's $j , for instance), use something like this:
(function($) {
$('foo').bar();
// etc.
})(jQuery);
Of course you can also do something like $ = $j;, but that's not recommended for any other purpose that quick testing in the Firebug console.
POST requests
[edit]I used jQuery's AJAX capabilities to send POST requests to API modules that don't accept GET requests.
// Assumes wgScriptPath is defined, which is the case as long as you're running
// this on a MediaWiki wiki. If it's not, set it to the path to api.php
$.post( wgScriptPath + '/api.php', {
// Request parameters
'action': 'edit',
'title': 'User:Catrope/Sandbox',
'text': 'IT WORKS',
'summary': 'API demonstration at Wikimania',
'token': 'tokenGoesHere',
'basetimestamp': 'timestampGoesHere'
}, function( data ) {
// This code is run when the request is completed
// In this example, we just ignore the result
}
);
Namespace selector
[edit]This is a jQuery plugin that builds a <select> with namespaces based on the result of an API siteinfo request. This plugin will probably also be used in the Usability Initiative's Babaco release.
Plugin code
[edit](function ($) {
$.mwNamespaces = {};
$.fn.namespaceSelector = function() {
var data = $(document).data( 'namespaceSelectorData' );
if ( typeof data == 'undefined' ) {
$(document).data( 'namespaceSelectorData', {} );
data = $(document).data( 'namespaceSelectorData' );
data.namespaces = null;
data.pending = false;
data.elements = $( [] );
}
if ( data.namespaces == null ) {
// Namespaces not loaded yet
data.elements = data.elements.add( this );
if( !data.pending ) {
// Call the API
data.pending = true;
$.getJSON( wgScriptPath + '/api.php', {
'action': 'query',
'meta': 'siteinfo',
'siprop': 'namespaces',
'format': 'json'
}, function( result ) {
data.namespaces = result.query.namespaces;
data.elements.namespaceSelector();
}
);
}
return this;
}
// Namespaces already loaded
return this.each( function() {
for ( var i in data.namespaces ) {
var id = data.namespaces[i].id;
var text = data.namespaces[i]['*'];
$('<option />')
.attr( 'value', id )
.text( text )
.appendTo( $(this) );
$.mwNamespaces[id] = text;
}
});
};})(jQuery);
Example usage
[edit]// Create a <select> and append it to the <body>
// Of course you can also use an existing <select> and skip this step
$( '<select />' ).addClass( 'namespaces' ).appendTo( $( 'body' ) );
// Turn the <select> into a namespace selector. Note that it takes time
// for the AJAX request to complete, so the <select> will be empty initially
$( 'select.namespaces' ).namespaceSelector();