Nov 23

MS AJAX beta – new plugins

Posted in Javascript MS AJAX      Comments Off on MS AJAX beta – new plugins

The MS AJAX beta release adds some new plugins to the previous ones. Besides the existing setCommand and bind, we now have access to the following plugins:

  • addHander: you can use this plugin to set up a handler for one event fired by one or several DOM elements;
  • removeHandler: as you can probably guess from its name, you can use this to cancel an existing DOM event subscription;
  • addHandlers: similar to the addHandler. However, in this case you can hook up several events (instead of passing the name of the event, you’re supposed to use a literal JS object where you specify the events and corresponding handlers);
  • clearHandlers: used for cancelling all event subscriptions that have been previously setup;
  • activateElements: used for activating the indicated elements with a specific binding context. Generally, you get activation for free. However, there are a couple of times where  you may need to activate an element explicitly. In those cases, this is the quickest (and shortest – yes, I’m counting key strokes) way to do that.

I’m not sure if you recall it, but plugins get promoted to Sys helper methods. Take a look at the following code which shows how to use the addHandler plugin to hook up the click event over all the existing buttons:

<head runat="server">
 <script type="text/javascript" 
script> <script type="text/javascript"> Sys.require([Sys.scripts.ComponentModel], function () { var buttons = document.getElementsByTagName("input"); Sys.addHandler(buttons, "click",function (evt) { alert(; }); }); </script> </head> <body> <input type="button" id="bt1" value="Button 1" /> <input type="button" id="bt2" value="Button 2" /> <input type="button" id="bt3" value="Button 3" /> </body>

Whenever you click over a button,you should get an alert message with the ID of the button. Now, since we’re talking about handlers, here’s how you’d use the addHanders plugin:

        click: function (evt) {

As you can see, I’ve used a literal JS object for specifying the events I want to handle. You should only use this plugin when you want to pass several handlers to different events. Notice that both plugins (addHandler and addHandlers) expect a reference to one or more DOM elements (you can see how to pass several references in the first snippet; the second passes a single DOM element reference). That’s why you should only use the second (addHandlers) when you need to setup several events at once.

Here’s what you get when you click “Button 1” after adding the last snippet to the page:


Notice that if you add this last snippet to the previous page, you should see two alert messages because you’re effectively adding two handlers to “button 1” click event.

One of the nicest things about plugins is their integration with JQuery. For instance, take a look at the following code:

<html xmlns="">
<head runat="server">
  <script type="text/javascript" 
src="Scripts/MicrosoftAjax/Start.debug.js"></script> <script type="text/javascript"> Sys.require(
function () { $.addHandler( $("input").get(), "click", function (evt) { alert("JQuery: " +; }); } ); </script> </head> <body> <input type="button" id="bt1" value="Button 1" /> <input type="button" id="bt2" value="Button 2" /> <input type="button" id="bt3" value="Button 3" /> </body> </html>

As you can see, I’ve started by requiring JQuery and the MS AJAX JavaScript files needed for using the addHandler method (oh, btw, I could have specified the dependency through the Sys.plugins.addHandler too). After getting all the files, my anonymous callback function will be called and that’s where everything interesting is happening.

There’s an addHandler method which got added to the jQuery object (aliased to the $) during JQuery loading. Notice that the addHandler plugin still expects the same arguments and that’s why we need to use the JQuery’s get method to get a reference to an array with all the DOM elements of the internal wrapped set.

This behavior is pretty cool and also works with other plugins. The only thing you should keep in mind is that non-behavior/control plugins always get added to the $ object; on the other hand, behaviors/controls get added to the $.fn object (and that means that these plugins are “transformed” into “instance” methods of the JQuery object – take a look at this post to see what I mean).

And that’s it”. Stay tuned for more on MS AJAX.