The Ajax is very popular technology among web developers since it reduces the data usage the http cycle and improves the usablity of an application, the purpose is same in the extension development too, Where the actual operation remains the same but the implementation is tricky, So this tutorial is created to help nubes to learn it in easy way.
This tutorial is the final installment of this series of MediaWiki extension development. In this tutorial we are going to discuss about the use of Ajax in extension. Basically we are going to demonstrate how can you expose the service to the JavaScript based ajax requests so to make the extension service dynamic on runtime. If you are new to MediaWiki and have no knowledge of writing custom extension yet please go through the previous articles but this article is not completely dependent on them. We will try to keep is as simple and free of dependency for you.
MediaWiki Extension – How to Develop custom extension in MediaWiki
MediaWiki Extension – localization of MediaWiki Extension
MediaWiki Extension – Using Resource Loader to inject JavaScript and CSS
MediaWiki Extension – Enabling use of Ajax in Extension
Ajax is well known feature provided by JavaScript and its libraries or Frameworks to update the DOM on the go without refreshing whole page. So in MediaWiki Ajax is a plus point if you are looking to make your extension a more cooler than treditional extensions.
To make sure the Ajax support is enabled in your extension first of all set $wgUseAjax to true, although the default value of this variable is true, but just to ensure that Ajax support is enabled.
After that you need to export the functions that are to be accessable via Ajax call. For the same the array variable $wgAjaxExportList is set. for example in our case we expose a static function to the Ajax call.
$wgAjaxExportList[] = 'DemoExtension::AjaxFunction';
Now let us define the body of this function, Well we’re not going to put in something great there, just sample line to demonstrate it is working.
<?php
class DemoExtension {
public static function injectHTMLInEditor(&$editPage,&$output) {
$output->addModules("ext.DemoExtension");
$editPage->editFormTextAfterWarn .='<div id="demoDiv" class="highlight-green">****Hi This is HTML Injected via Demo Extension****</div>';
$editPage->editFormTextAfterWarn .='This Message Comes From The localization Files:'.wfMessage('the-key');
$editPage->editFormTextAfterWarn .='<div id="parameterDiv">Click Me to see the Ajax Magic!</div>';
return true;
}
public static function AjaxFunction($string){
return $string." is past now, I am here and Ajax sent me.";
}
}
Okay, so we made little modification in the code here we added another div in the HTML injected via extension, and we defined the body of AjaxFunction which will act as our Ajax correspondent. It is time to do some JS here, because the call will be initiated via JS. so in js file of your extension add following code to call Ajax function.
console.log("Hey, My JS is working!");
$('#parameterDiv').click(function(){
$.get(mw.util.wikiScript(),{
action:'ajax',
rs:'DemoExtension::AjaxFunction',
rsargs:[$(this).text()]
},function(data){
$("#parameterDiv").html(data);
});
});
The code above is using JQuery get method and invoking mediawiki API through which it looks into the registered Ajax exposed functions that we specify as the parameter for “rs” and the “rsargs” is an array of parameters which can be passed on to the Ajax function and will be received in the arguments of the function defined in the PHP file of extension.
Okay your extension is now Ajax ready, you can test it. Because the series is already going on with an extension that works with editing of the wiki page, we are going to test it there. The edit area now has a new div with the text “Click me to see the Ajax Magic!”. Click it and you will be performing an Ajax request to the wiki API and the result will be modified as second image.
So, here we leave you with the extension development, there is of course more to extension development than this, but this should be good enough to make you familiar with the extension development.
