MediaWiki

User:Catrope/Wikimania/jQuery

< User:Catrope | Wikimania

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();
Retrieved from "https://www.mediawiki.org/w/index.php?title=User:Catrope/Wikimania/jQuery&oldid=272997"