Update Panel .NET

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!

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.

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.

!!! 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;
}

There are many implementations of text box watermarking, but they all involve changing the actual value of the text box, which means you have to ensure the watermark text is removed before submitting the form, this can get tricky if you also use a client-side form validation framework.

I have come up with an implementation that does not modify the value of the text box, but instead, displays the watermark “behind” the text box.

Here is the HTML structure:

<span class="updn-wm">
    <label for="txtLocation">e.g. London or W1</label>
    <input id="txtLocation" id="txtLocation" type="text" />
</span>

The outer <span> element acts as a positioning parent for the <label> element (i.e. watermark) and the <input> element (i.e. text box).
The <input> element is statically positioned and the <label> element is absolutely positioned to appear behind the <input> element.

Here is the CSS:

.updn-wm
{
    /* make this the positioning parent */
    position: relative;
}
.updn-wm label
{
    /* place watermark behind text box */
    position: absolute;
    left: 2px;
    top: 2px;
    /* watermark styling */
    color: #999;
    font-family: verdana, sans-serif;
    font-size: small;
    font-style: normal;
}
.updn-wm input
{
    /* make text box transparent */
    background: none;
    /* text box styling */
    border: solid 1px #999;
    font-family: verdana, sans-serif;
    font-size: small;
    font-style: normal;
}

For the behavior script, I used jQuery because it’s quick and easy to work with:

$(document).ready(function() {
 $(".updn-wm").each(
  function() {
   $("input[type='text']", this).each(
    function() {
     // initial state of watermark
     if (this.value.length > 0) {
      $("label", this.parentNode).hide();
     }
     // show/hide watermark text
     $(this).focus(
      function() {
       if (this.value.length == 0) {
        $("label", this.parentNode).hide();
       }
      }
     ).keydown(
      function() {
       if (this.value.length == 0) {
        $("label", this.parentNode).hide();
       }
      }
     ).blur(
      function() {
       if (this.value.length == 0) {
        $("label", this.parentNode).show();
       }
      }
     ).change(
      function() {
       if (this.value.length == 0) {
        $("label", this.parentNode).show();
       }
      }
     );
    }
   );
  }
 );
});

Note: Whitespaces between tags causes IE to render incorrectly, a quick fix is to join the tags together like so:

<span class="updn-wm"><label for="txtLocation">e.g. London or W1</label><input id="txtLocation" id="txtLocation" type="text" /></span>

While I was preparing for my previous post, I came across this thread and a comment made by the moderator ‘jkd’ grabbed my attention:

“Another one:  input.value versus input.getAttribute(“value”). The latter should return the actual string specified in the markup of the value attribute, while input.value returns the current value of the input element.”

I was somewhat alarmed by this comment, because for over a decade (and a half?) of being a web developer, I never knew about this, and so I did some simple tests and the results were very interesting!

Here is the HTML source for the test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head>
<title>More on getAttribute() and setAttribute()</title>
</head>
<body>
<input id="TextBox1" type="text" value="123" />
<input type="button" value="alert(element.getAttribute('value'));" onclick="alert(document.getElementById('TextBox1').getAttribute('value'));" />
<input type="button" value="alert(element.value);" onclick="alert(document.getElementById('TextBox1').value);" />
<ol>
	<li><input type="button" value="element.setAttribute('value', '456');" onclick="document.getElementById('TextBox1').setAttribute('value', '456');" /></li>
	<li>Enter 'abc' into the text box.</li>
	<li><input type="button" value="element.value = '789';" onclick="document.getElementById('TextBox1').value = '789';" /></li>
	<li><input type="button" value="element.setAttribute('value', 'xyz');" onclick="document.getElementById('TextBox1').setAttribute('value', 'xyz');" /></li>
</ol>
</body>
</html>

First, let me clarify two terms I will be using in the remaining post:

• “value” property is element.value;
• “value” attribute is element.getAttribute(“value”);

Open the test page in Chrome, and you should see:

Click the alert(element.getAttribute(‘value’)); button and you should see:

Click the alert(element.value); button and you should see:

Currently, the “value” attribute and the “value” property of the text box has the same initial value of ’123′, as specified in the HTML mark-up.

Now, follow each of the four steps:

Step 1:

Click the button to set the value of the “value” attribute to ’456′:

Notice the text box now displays ’456′. 

Click the alert(element.getAttribute(‘value’)); button and you should see:

Click the alert(element.value); button and you should see:

The “value” attribute and the “value” property of the text box now has the value of ’456′.  This is what I expected.

 Step 2:

Enter ‘abc’ into the text box.  This is manually changing the value of the “value” property.

Click the alert(element.getAttribute(‘value’)); button and you should see:

Huh?

Click the alert(element.value); button and you should see:

No, the attribute value is not the same as the property value! What is going on here?

Step 3:

Click the button to change the property value to ’789′:

Click the alert(element.getAttribute(‘value’)); button and you should still see:

Click the alert(element.value); button and you should see:

Okay, basically, we got the same behavior as in step 2.

Step 4:

Click the button to change the attribute value to ‘xyz’:

Notice that the the text box is still displaying ’789′, which is the property value we had set in step 3.

Click the alert(element.getAttribute(‘value’)); button and you should see:

Click the alert(element.value); button and you should still see:

This confirms that once set, the value of the property is independent from the value of the attribute.

Wasn’t that interesting? Well, I thought it was!  Now run the test in Firefox, Opera, Safari, and Internet Explorer!!!

With Chrome, Firefox, Opera and Safari, the following behaviors were observed:

• The “value” attribute is disconnected from the “value” property.
  (element.getAttribute(“value”) !== element.value)
• Setting the “value” attribute does not directly affect the “value” property.
• If the value of the “value” property has not been set, it will return the value of the “value” attribute as default.

With Internet Explorer, the following behaviors were observed:

• The “value” attribute is connected to the “value” property.
  (element.getAttribute(“value”) === element.value)
• Setting the “value” attribute directly affects the “value” property.
• The value of the property is always the same as the value of the attribute.

It seems that using element.setAttribute() and element.getAttribute() methods, especially on the “value” attribute is fraught with problems.  So my conclusion is to always use element.value to ensure cross-browser compatibility!

Related Links:

• https://developer.mozilla.org/en/DOM/element.getAttribute
• http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
• http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-637646024

Immediately after my previous post, I searched around the web for the best (correct and “performant”) method to access attributes of HTML elements; I mean, should I use element.setAttribute() or element.getAttribute() methods, or should I access the attributes directly using JavaScript dot notation or subscript notation?

I think the main problem is that I am old and stubborn and have always visualized HTML elements in my head as tags marked with attributes, instead of objects with methods and properties!

“The DOM Level 2 HTML extends the DOM Level 2 Core API to describe objects and methods specific to HTML documents, and XHTML documents”.

Basically, if an attribute (property) exists in the DOM Level 2 HTML specification, you can access it directly using JavaScript dot notation.  Make sure you use the correct camel-case name as JavaScript is case sensitive!

The example from my previous post should now read:

// Creates a check box
var input = document.createElement("input");
input.type = "checkbox";
input.value = option.value;
input.id = itemId;
// Creates an associated label
var label = document.createElement("label");
label.htmlFor = itemId;
label.appendChild(document.createTextNode(option.text));

This is a super tip from Sara Ford’s WebLog! There is a library of icons and images hidden in the depth of Visual Studio, in my installation, the zip file is located at C:\Program Files\Microsoft Visual Studio 9.0\Common7\VS2008ImageLibrary\1033.

Here are some examples:

The prevalent use of styled borders (e.g. rounded corners) by our designers have caused much debate amongst the developers as to which technique should be employed to achieve the desired result.  The Backgrounds and Borders Module in CSS Level 3 would be ideal, but we have to wait until that becomes ubiquitous.

In this post, I present to you an extender control I created to add image corners to <asp:Panel> controls.  The extender works by injecting additional <div> elements into the DOM and style each with a background image.

Below is the source code for the server-side extender control:

using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;
[assembly: WebResource("UPDN.ImageCornersBehavior.js", "text/javascript")]
namespace UPDN
{
    ///

    [TargetControlType(typeof(Panel))]
    public class ImageCornersExtender : ExtenderControl
    {
        public string TopBorderImageUrl { get; set; }
        public string RightBorderImageUrl { get; set; }
        public string BottomBorderImageUrl { get; set; }
        public string LeftBorderImageUrl { get; set; }
        public string TopLeftCornerImageUrl { get; set; }
        public string TopRightCornerImageUrl { get; set; }
        public string BottomLeftCornerImageUrl { get; set; }
        public string BottomRightCornerImageUrl { get; set; }
        public string MiddleImageUrl { get; set; }
        protected override IEnumerable GetScriptDescriptors(Control targetControl)
        {
            var descriptor = new ScriptControlDescriptor(“UPDN.ImageCornersBehavior”, targetControl.ClientID);
            var imageUrls = new Dictionary();
            if (!string.IsNullOrEmpty(TopBorderImageUrl))
                imageUrls.Add(“t”, TopBorderImageUrl);
            if (!string.IsNullOrEmpty(RightBorderImageUrl))
                imageUrls.Add(“r”, RightBorderImageUrl);
            if (!string.IsNullOrEmpty(BottomBorderImageUrl))
                imageUrls.Add(“b”, BottomBorderImageUrl);
            if (!string.IsNullOrEmpty(LeftBorderImageUrl))
                imageUrls.Add(“l”, LeftBorderImageUrl);
            if (!string.IsNullOrEmpty(TopLeftCornerImageUrl))
                imageUrls.Add(“tl”, TopLeftCornerImageUrl);
            if (!string.IsNullOrEmpty(TopRightCornerImageUrl))
                imageUrls.Add(“tr”, TopRightCornerImageUrl);
            if (!string.IsNullOrEmpty(BottomLeftCornerImageUrl))
                imageUrls.Add(“bl”, BottomLeftCornerImageUrl);
            if (!string.IsNullOrEmpty(BottomRightCornerImageUrl))
                imageUrls.Add(“br”, BottomRightCornerImageUrl);
            if (!string.IsNullOrEmpty(MiddleImageUrl))
                imageUrls.Add(“m”, MiddleImageUrl);
            descriptor.AddProperty(“imageUrls”, imageUrls);
            yield return descriptor;
        }
        protected override IEnumerable GetScriptReferences()
        {
            yield return new ScriptReference(“UPDN.ImageCornersBehavior.js”, this.GetType().Assembly.FullName);
        }
    }
}

And the source code for the client-side behavior:

Type.registerNamespace("UPDN");
UPDN.ImageCornersBehavior = function(element) {
    UPDN.ImageCornersBehavior.initializeBase(this, [element]);
    // keys: t, l, b, r, tl, tr, bl, br
    this._imageUrls = null;
}
UPDN.ImageCornersBehavior.prototype = {
    initialize: function() {
        UPDN.ImageCornersBehavior.callBaseMethod(this, "initialize");
        var el = this.get_element();
        var imagesUrls = this.get_imageUrls();
        var containers = [];
        // create border elements
        if (imagesUrls["t"]) {
            var t = document.createElement("div");
            t.style.background = "url(" + imagesUrls["t"] + ") repeat-x top left";
            containers.push(t);
        }
        if (imagesUrls["r"]) {
            var r = document.createElement("div");
            r.style.background = "url(" + imagesUrls["r"] + ") repeat-y top right";
            containers.push(r);
        }
        if (imagesUrls["b"]) {
            var b = document.createElement("div");
            b.style.background = "url(" + imagesUrls["b"] + ") repeat-x bottom left";
            containers.push(b);
        }
        if (imagesUrls["l"]) {
            var l = document.createElement("div");
            l.style.background = "url(" + imagesUrls["l"] + ") repeat-y top left";
            containers.push(l);
        }
        if (imagesUrls["tl"]) {
            var tl = document.createElement("div");
            tl.style.background = "url(" + imagesUrls["tl"] + ") no-repeat top left";
            containers.push(tl);
        }
        if (imagesUrls["tr"]) {
            var tr = document.createElement("div");
            tr.style.background = "url(" + imagesUrls["tr"] + ") no-repeat top right";
            containers.push(tr);
        }
        if (imagesUrls["bl"]) {
            var bl = document.createElement("div");
            bl.style.background = "url(" + imagesUrls["bl"] + ") no-repeat bottom left";
            containers.push(bl);
        }
        if (imagesUrls["br"]) {
            var br = document.createElement("div");
            br.style.background = "url(" + imagesUrls["br"] + ") no-repeat bottom right";
            containers.push(br);
        }
        if (containers.length > 0) {
            // create content container
            var m = document.createElement("div");
            m.className = "content";
            // move child elements of target element into content container
            this._moveChildren(el, m);
            // set middle image as background of target element
            if (imagesUrls["m"]) {
                el.style.background = "url(" + imagesUrls["m"] + ") repeat top left";
            }
            containers.push(m);
            // inject containers into DOM
            el.appendChild(containers[0]);
            for (var i = 1; i < containers.length; i++) {
                containers[i - 1].appendChild(containers[i]);
            }
        }
    },
    dispose: function() {
        //Add custom dispose actions here
        UPDN.ImageCornersBehavior.callBaseMethod(this, "dispose");
    },
    _moveChildren: function(srcEl, destEl) {
        while (srcEl.hasChildNodes()) {
            var child = srcEl.childNodes[0];
            destEl.appendChild(child);
        }
    },
    get_imageUrls: function() {
        return this._imageUrls;
    },
    set_imageUrls: function(value) {
        this._imageUrls = value;
    }
}
UPDN.ImageCornersBehavior.registerClass("UPDN.ImageCornersBehavior", Sys.UI.Behavior);

To use the extender, place an <asp:Panel> control on the page:

<asp:Panel ID="Panel1" runat="server" CssClass="box1">
    This box is styled using 8 images. Lorem ipsum no etiam perfecto his, per adhuc maiorum epicurei eu. Laoreet signiferumque in mel, ne vel dicat percipit instructior. An eum veniam decore perpetua, nam laudem praesent at. Exerci accumsan contentiones est ei, appetere gloriatur et qui, ea suscipit senserit consectetuer mei.
</asp:Panel>

Then add the extender, set the TargetControlID to the ID of the <asp:Panel> control, and specify the images required to achieve your design. For this panel, I require eight images, four for the borders and four for the corners:

<updn:ImageCornersExtender ID="ImageCornersExtender1" runat="server"
    TargetControlID="Panel1"
    TopBorderImageUrl="img/box1/t.gif"
    RightBorderImageUrl="img/box1/r.gif"
    BottomBorderImageUrl="img/box1/b.gif"
    LeftBorderImageUrl="img/box1/l.gif"
    TopLeftCornerImageUrl="img/box1/tl.gif"
    TopRightCornerImageUrl="img/box1/tr.gif"
    BottomLeftCornerImageUrl="img/box1/bl.gif"
    BottomRightCornerImageUrl="img/box1/br.gif"
/>

Here is how the complete example looks like:

Download the source code and example from my SkyDrive.

There have been many takes on the asynchronous upload control, but I am presenting another solution that will extend any existing <asp:FileUpload> control.

The basic mechanism to asynchronous upload is to submit the form to a ‘hidden’ iframe:

<html>
<body>
<form action="http://www.this-page-intentionally-left-blank.org/" method="get" target="winUpload">
	<input type="submit" value="Upload" />
</form>

</body>
</html>

In this example, I have declared the <iframe> in the mark-up, and set the form target to the <iframe>.  On clicking the upload button, you should see a “blank” page in the <iframe>.  This example works in all major browsers.

Since my goal is to create an extender, I need to create the <iframe> and hook up the form taget programmatically using DOM scripting:

<html>
<body>
<form action="http://www.this-page-intentionally-left-blank.org/" method="get">
	<input type="submit" value="Upload" />
</form>
<script>
var iframeId = "winUpload";
var iframe = document.createElement("iframe");
iframe.id = iframeId;
iframe.name = iframeId;
document.body.appendChild(iframe);
document.forms[0].target = iframeId;
</script>
</body>
</html>

This example worked in all major browsers except Internet Explorer! With IE, the form is submitted to a new page/tab instead of the <iframe> as specified in the target attribute.

Suspecting that may be the id and name attributes hadn’t been set correctly, I added Sys.Debug.trace(document.getElementById(“winUpload”)) and Sys.Debug.trace(document.getElementsByName(“winUpload”) and the console output shows the <iframe> element, suggesting that the <iframe> was created, attributes set and added to the DOM.

So why can’t the form find its target window? I looked up this problem in a search engine and found a handful of posts:

• http://msdn.microsoft.com/en-us/library/ms536389.aspx
• http://www.quirksmode.org/js/iframe.html
• http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
• http://news.hping.org/comp.lang.javascript.archive/0959.html
• http://developer.apple.com/internet/webcontent/iframe.html
• http://readystate4.com/2008/05/13/dynamically-creating-an-iframe-for-internet-explorer/

Using the suggestions from these posts, here is the updated example:

<html>
<body>
<form action="http://www.this-page-intentionally-left-blank.org/" method="get">
	<input type="submit" value="Upload" />
</form>
<script>
var iframeId = "winUpload";
if (document.all) {
    var iframe = document.createElement("");
} else {
    var iframe = document.createElement("iframe");
}
iframe.id = iframeId;
iframe.name = iframeId;
document.body.appendChild(iframe);
document.forms[0].target = iframeId;
</script>
</body>
</html>

B.t.w. If you are not using ASP.NET AJAX, why not take a look at YUI’s Connection Manager which implements asynchronous file uploads.

!!! To be continued !!!