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.
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
