Microsoft AJAX Library Preview 6 Available

Yeah, new stuff to play with!

Read more about this release:

• Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax Minifier
• How the Script Loader in the Microsoft Ajax Library will make your life wonderful
• Entirely unobtrusive and imperative templates with Microsoft Ajax Library Preview 6
• Using the New Microsoft Ajax Minifier

You should disable the DEFLATE compression scheme in IIS 6

If you are using IIS 6, and has compression switched on, and is experiencing intermittent problems such as broken page styling or JavaScript errors when browsing with IE 7/8, then the simple fix is to disable the deflate compression scheme from IIS 6:

ADSUtil.vbs Set W3SVC/Filters/Compression/deflate/HcDoStaticCompression FALSE
ADSUtil.vbs Set W3SVC/Filters/Compression/deflate/HcDoOnDemandCompression FALSE
ADSUtil.vbs Set W3SVC/Filters/Compression/deflate/HcDoDynamicCompression FALSE

ASP.NET AJAX Validator

As promised weeks ago, here is my ASP.NET AJAX validation control “framework”.

To create your own AJAX validation control:

1. Create a new class which inherits UPDN.AjaxValidator:

public class YourValidator : UPDN.AjaxValidator { /*...*/ }

2. Provide a public static method to perform the validation, the signature of the method should be:

public static ValidationResult YourValidationMethod(string value)

3. Override OnServerValidate to call your public static validation method:

protected override bool OnServerValidate(string value)
{
    var result = YourValidationMethod(value);
    return result.IsValid;
}

4. Override GetScriptReferences to include your client-side script:

protected override void GetScriptReferences(ScriptReferenceCollection references)
{
    base.GetScriptReferences(references);
    references.Add(new ScriptReference("~/Scripts/YourValidator.js"));
}

5. Create the client-side control for your validation control, which inherits UPDN.AjaxValidator:

Type.registerNamespace("Example");
Example.YourValidator = function(element) {
    Example.YourValidator.initializeBase(this, [element]);
};
Example.YourValidator.prototype = {
    // Override validate to do pre-validation checks.
    validate: function(val, args, event) {
        Example.YourValidator.callBaseMethod(this, "validate", [val, args, event]);
    },
    // Override validated to do post-validation stuff.
    validated: function(result, event) {
        var val = this.get_element();
        // Do your custom validation message display stuff here!
    }
};
Example.YourValidator.registerClass("Example.YourValidator", UPDN.AjaxValidator);

6. Expose the YourValidationMethod method in YourValidator class as a “Page Method” in the code-behind:

[WebMethod]
public static ValidationResult YourValidationPageMethod(string domain)
{
    return YourValidator.YourValidationMethod(domain);
}

7. Add reference to your validation control in Web.config:

<pages>
    <controls>
    ...
        <add tagPrefix="example" namespace="Example"/>
    </controls>
</pages>

8. Add the validation control to your page, set the PageMethodName property to “YourValidationPageMethod”:

<example:YourValidator runat="server" ID="YourValidator1" ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="Your error message" PageMethodName="YourValidationMethod" ProgressIndicatorCssClass="wait" />

Download the (VS.NET 2008) solution from my SkyDrive.

How to make Selenium Sizzle

Selenium is a good client-side testing framework and integrates Dean Edward’s cssQuery library, but as a seasoned :p jQuery developer, I would like to be able to use all the selectors available in jQuery.

Luckily, Sizzle is the selector engine that powers the jQuery library, and it is designed to be easily dropped into a host library, and that includes the Selenium framework.

Okay, I’ll stop repeating what you already knew, and tell you how I integrated Sizzle into the Selenium framework:

1. Start Selenium IDE, open the Options dialog.

2. Click the [Browse...] button for the “Selenium Core extensions” field, locate and select ”sizzle.js”.

3. Create or update “user-extensions.js”, adding the following snippet:

function eval_css(locator, inDocument) {
    var results = [];
    window.Sizzle(locator, inDocument, results);
    return results
}

 

This bit of code simply overrides the eval_css() function in htmlutils.js to use the Sizzle engine.

4. Click the [Browse...] button again, this time locate and select ”user-extensions.js”.

5. Close and restart Selenium IDE.

Now, try out the Sizzle selectors, for example:

Navigate to http://www.google.co.uk/preferences?hl=en

Insert a new command, in the Target field, enter:

css=:checkbox[name=lr]:last

Now click the [Find] button and you should see the checkbox for Vietnamese highlighted.

I have not (yet) tried this with Selenium RC, but if you want to have a go, please refer to Using User-Extensions With Selenium RC.

Styling the jQuery UI dialog buttons with sliding doors

One of the problems with jQuery UI’s dialog plugin is that the buttons cannot be styled with sliding doors because they lack the necessary mark-up, i.e. a pair of <span> tags around the button text.

Until there’s an official fix, I have a quick hack:

Simply add the line below after your dialog initialisation code.

$(".ui-dialog-buttonpane button").wrapInner("<span/>");

jQuery fireEvent plugin

I needed a way to simulate the “change” DOM event for input elements, so I created this plugin:

$.fn.fireEvent = function(eventType) {
    return this.each(function() {
        if (document.createEvent) {
            var event = document.createEvent("HTMLEvents");
            event.initEvent(eventType, true, true);
            return !this.dispatchEvent(event);
        } else {
            var event = document.createEventObject();
            return this.fireEvent("on" + eventType, event)
        }
    });
};

Usage:

$("#field").fireEvent("change");

When I have time, I’ll explain the reason why I needed to use this plugin instead of just $(“#field”).change()!

How to invoke ASP.NET Page Methods using jQuery

Why do I want to invoke ASP.NET Page Methods using jQuery?

• I do not want the ScriptManager to generate any proxy code in my page source, i.e. set EnablePageMethods to “false”.
• I want to make the call synchronous! (N.B. You should avoid making synchronous calls!)

Show me the code:

$.ajax({
    async: true, /* set this to false to make a synchronous call */
    contentType: "application/json; charset=utf-8",
    data: Sys.Serialization.JavaScriptSerializer.serialize({ arg1, arg2, etc... }),
    dataType: "json",
    type: "post",
    url: "application_path/page.aspx/page_method_name",
    success: function(result) {
        // Insert your success handler code here.
    }
});

I am assuming the Microsoft AJAX Library is included on the page, and I am using Sys.Serialization.JavaScriptSerializer.serialize to prepare the page method call arguments into JSON.

jQuery Watermark Plugin (Version 1.0.1)

I have just uploaded version 1.0.1 of my watermark plugin.

This release fixes positioning problems users have encountered when:

• Browser windows is resized.
• Elements are added or removed.
• Visibility of input element is toggled.

In this updated version, instead of absolutely positioning the watermark <label> element based on the (initial) position of the <input> element, I inject an extra <span> before the <input> element, and use the <span> as the positioning container for the watermark <label>.

As the <span> is “statically” positioned, it “follows” the <input> element, and consequently, the watermark <label> also “follows” the <input> element.

Enjoy!

WebKit Bug! Default value of unchecked checkbox element is an empty string!

If you drop a checkbox on a page, without setting the value attribute, for example:

<input type="checkbox" />

Browsers should default the value to the string “on”. To check this, add a “onclick” handler to display the value of the checkbox:

<input type="checkbox" onclick="alert(this.value);" />

Now, test this in the latest versions of Internet Explorer, Firefox, Opera, Chrome and Safari, you will notice that for the first three browsers, the value displayed for both checked and unchecked state is “on” but for Chrome (2) and Safari (4), the value displayed for the unchecked state is an empty string!

Surely this is a bug, because if you did specify a value, for example:

<input type="checkbox" value="foo" onclick="alert(this.value);" />

You will see “foo” displayed in the alert box for both checked and unchecked state on all browsers!

Are you having trouble aligning form fields?

If you specify the same width (and/or height) to your form fields, i.e. inputs, textareas and selects, and wondered why they don’t line up, then you need to know the difference between their box models.

The following elements follow the W3C Box Model: (i.e. width excludes paddings and borders)

• <input type=”file” />
• <input type=”text” />
• <textarea />

And the following elements follow the Traditional (IE) Box Model: (i.e. width includes paddings and borders)

• <input type=”button” />
• <input type=”checkbox” />
• <input type=”radio” />
• <input type=”reset” />
• <input type=”submit” />
• <select />

So, you need to ensure that the width (and/or height) of the second set of elements should equal width + paddings + borders of the first set of elements.