Archive for April 2009
Setting the “value” attribute of a newly created LI element causes IE to crash
The Bug
If you programmatically set the “value” attribute of a newly created <li> element, Internet Explorer (IE) versions 5, 6 and 7 will crash without fail.
Here is the HTML source to my test page:
<html>
<head>
<title>IE Crash Example</title>
</head>
<body>
<button type="button" onclick="document.createElement('li').value = null;">null - Okay</button>
<button type="button" onclick="document.createElement('li').value = 0;">0 - Okay</button>
<button type="button" onclick="document.createElement('li').value = 1;">1 - Crash</button>
<button type="button" onclick="document.createElement('li').value = '1';">'1' - Crash</button>
<button type="button" onclick="document.createElement('li').value = true;">true - Crash</button>
<button type="button" onclick="document.createElement('li').value = 'true';">'true' - Okay</button>
<button type="button" onclick="document.createElement('li').value = false;">false - Okay</button>
<button type="button" onclick="document.createElement('li').value = [];">[] - Okay</button>
<button type="button" onclick="document.createElement('li').value = [1];">[1] - Crash</button>
<button type="button" onclick="document.createElement('li').value = ['1'];">['1'] - Crash</button>
<button type="button" onclick="document.createElement('li').value = ['true'];">['true'] - Okay</button>
<button type="button" onclick="document.createElement('li').value = {};">{} - Okay</button>
<button type="button" onclick="document.createElement('li').value = {count:1};">{count:1} - Okay</button>
<button type="button" onclick="document.createElement('li').value = undefined;">undefined - Okay</button>
<button type="button" onclick="document.createElement('li').value = function(){};">function(){} - Okay</button>
</body>
</html>
Interestingly, the crash happens when the value is set to a non-zero number, or evaluates to a non-zero number!
The Workaround
As the “value” attribute of the <li>element is deprecated, I suggest you avoid using it. But if you must, attach the <li> element to the DOM before manipulating it’s attributes, i.e.
var li = document.createElement("li");
ul.appendChild(li);
li.value = 1;
If you are using jQuery:
$("
<li/>").appendTo(ul).val(1);
But I suggest you store the value using the data function:
$("
<li/>").appendTo(ul).data("value", 1);
N.B. The bug has been fixed in IE 8.
Goodbye Microsoft AJAX Library
Microsoft AJAX Library is no more… for me!
No more Sys.<Whatever>!
I’ve seen the light, I shall jQuery all the way… to scripting heaven!
P.S. I may still use one or two JavaScript extensions (e.g. String.format) from the Microsoft AJAX Library!
jQuery (ASP.NET) Validator Callout Plugin
This plugin enhances the presentation of ASP.NET validator controls, by displaying the validation error message inside a (popup) callout box, like this:
This plugin is similar to the ValidatorCallout extender in the ASP.NET AJAX Control Toolkit.
Download
Download the latest release from http://plugins.jquery.com/project/updnValidatorCallout
Usage
Simply call jQuery.updnValidatorCallout.attachAll() to attach the plugin to all validators on your page.
For example:
jQuery(document).ready(function($) {
$.updnValidatorCallout.attachAll();
});
You can style the callout box and pointer by specifying the ”calloutCssClass” and “pointerCssClass” options:
jQuery(document).ready(function($) {
$.updnWatermark.attachAll({
calloutCssClass: "myValidatorCallout",
pointerCssClass: "myValidatorCalloutPointer",
);
});
You can also style the input element and all associated labels that are in error state by specifying the “errorInputCssClass” and “errorLabelCssClass” options:
jQuery(document).ready(function($) {
$.updnWatermark.attachAll({
calloutCssClass: "myValidatorCallout",
pointerCssClass: "myValidatorCalloutPointer",
errorInputCssClass: "myValidationErrorInput",
errorLabelCssClass: "myValidationErrorLabel" }
);
});
Alternatively, you can simply style the default CSS classes provided by the plugin:
.updnValidatorCallout
{
background-color: #fcc;
color: #900;
padding: 5px;
margin: -5px 0 0 10px;
position: relative;
}
.updnValidatorCalloutPointer
{
position: absolute;
left: 0;
top: 7px;
margin: 0 0 0 -10px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 10px solid #fcc;
border-left: 0;
}
.updnValidationErrorInput
{
background-color: #fcc;
}
.updnValidationErrorLabel
{
color: #900;
}
N.B. For the triangular pointer, I used a pure CSS solution as detailed in this article.
jQuery Watermark Plugin
!!! Latest release 1.0.1 now available !!!
This plugin turns the tooltip text specified in the title attribute of your input element into a watermark, like this:
This watermark plugin can safely be used on text, password and textarea elements, as it does not alter the value of the fields, and therefore does not affect form submits or AJAX calls.
The plugin works by creating a label element using the text specified in the title attribute of each selected input element, and inserting the label element before the input element, absolutely positioned (relative to the input element’s positioning context) to appear ”behind” or “inside” the field.
Download
Download the latest release from http://plugins.jquery.com/project/updnWatermark
Usage
Specify the watermark text in the title attribute of each input element:
<input id="username" name="username" type="text" title="Please enter username" /> <input id="password" name="password" type="password" title="Please enter password" /> <textarea id="description" name="description" title="Please enter description"></textarea>
Then simply call jQuery.updnWatermark.attachAll() to attach the plugin to all text, password and textarea elements in the document.
For example:
jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});
You can style the watermark by supplying a class via the “cssClass” option:
jQuery(document).ready(function($) {
$.updnWatermark.attachAll({ cssClass: "myWatermark" });
});
Alternatively, just style the default “updnWatermark” class:
.updnWatermark {
color: #999;
font-family: Sans-Serif;
font-size: small;
font-style: italic;
padding: 2px;
}
ASP.NET AJAX 4.0 Preview 4 Available
ASP.NET AJAX 4.0 Preview 4 is available for download.
This release contains a preview version of the following features:
-
- ADO.NET Data Services support
- WCF and ASMX Web service integration
- ASP.NET AJAX Client Templates
- Declarative instantiation of client-side controls and behaviors
- Observable pattern for plain JavaScript objects
- Live Bindings
- Markup Extensions
- DataView control and DataContext component
- Command Bubbling
- Change tracking and identity management
- Support for managing complex links and associations between entities from multiple entity sets or tables
- Extension methods allowing change tracking and read-write client-server scenarios using other JSON services, including RESTful or JSONP based services
