I had some trouble trying to find an example of how to call an ASP.NET webservice from MooTools. I eventually pieced the bits together from a couple of forum posts and thought I’d post an example here in case anyone else was having the same problems.

If I have an ASP.NET webservice that has a GetById method that takes a single int parameter and returns an object I can call it with the following code:

function doAjaxWebServiceRequest (id) {
var completeDelegate = Function.createDelegate(this, this.callback);
var failureDelegate = Function.createDelegate(this, this.error);
var request = new Request.JSON({url: ‘http://hostname/MyWebService.asmx/GetById’,
onComplete: completeDelegate,
onFailure: failureDelegate,
urlEncoded: false,
headers: {“Content-type”: “application/json”}
});
request.send(JSON.encode({‘id’: id}));
},

The returned object will be in JSON format. The lines where I create my callback delegates using the Function.createDelegate method allow me to set the scope of ‘this’ in my call backs to be the object I making the request from.

Hope that helps someone out!

We’re using the MooTools scripting framework on our site and today I discovered a strange difference between Firefox and IE. I was creating an element and injecting it into the DOM and then trying to change its CSS class and styles.

addClass and setStyle
MooTools provides methods on it’s Element class that allow you to manipulate the CSS styling of an element. You can do things like:

// Add a css class to the element with the id foo
$(‘foo’).addClass(‘fooStyle’);

// Set the width of the foo element
$(‘foo’).setStyle(‘width’, ‘100px’);

Unfortunately when viewing an ASP.NET page in IE that includes a script that uses these functions you get a script error saying that the “Object doesn’t support this property or method”

At first I thought the solution was to go back to basics:

// Add a css class to the element with the id foo
$(‘foo’).className = ‘fooStyle’;

// Set the width of the foo element
$(‘foo’).style.width = ‘100px’;

However I then realised that I was trying to call the MooTools Element methods on a vanilla element object rather than a MooTools one. The second line below solved the problems in IE and meant I could go back to the first way of applying the styling.

var myelement = document.createElement(“a”);
myelement = $(myelement);

IE vs Firefox
In retrospect it seems strange that this worked in Firefox, I guess Firefox must be able to do some sort of implicit conversion to a MooTools element in order to resolve the method call.

MooTools seems really great, it’s lightweight and easy to use. The learning curve seems much lower than some of the other more complicated offering available.

The only reservation I have at this point is that from what I’ve read on the forums it doesn’t play nicely with any other scripting framework due to it’s lack of namespaces and the maintainers seem quite hostile to anyone who suggests that would be a good thing.