Break Long, Unspaced Strings For Alert


In some browsers, such as Safari 3 and Chrome, passing a long, unspaced string into the 'alert' function will print only 1 line of text, cutting off any part of the string exceeding the alert box width. Most of the time the 'alert' function is used for debugging purposes, and this textual clipping can be make debugging difficult. Here is a simple RegExp that will auto-insert a newline character every 55 characters in a string, before passing the string to the 'alert' method.

Example 1: SpacedAlert Function

spacedAlert: function(s) {
	var str = '' + s;

	if (55 < str.length) {
		str = str.replace(/(\S{55})/g, '$1\n');
	}

	alert(str);
}

In my personal experience, this has been most useful when checking the serialization of a form before passing it to an AJAX request. Say we have the following serialized form string:

Example 2: A Serialized Form

username=matt+snider&password=asdf1234&email=mattsnider@mattsnider.com&zipcode=94041&city=mountain+view&browser=firefox

When passed to 'alert' in Safari and Chrome, it will be truncated to:

Example 3: How Safari & Chrome Truncate

username=matt+snider&password=asdf1234&email=mattsnider@

But the 'spacedAlert' function will produce the following alert message:

Example 4: Spaced Alert For A Serialized Form

username=matt+snider&password=asdf1234&email=mattsnider
@mattsnider.com&zipcode=94041&city=mountain+view&browse
r=firefox

Now the developer can easily read the whole string.

IE Issues with Name and Id Attributes


After building a site in FireFox that uses the "document.getElementById" to fetch a DIV, the engineer switches over to IE, only to find that the same call is returning a different element (most likely an A or INPUT element). After hours of debugging and frustration, said engineer gives up and instead starts writing a virus to uninstall IE from infected computers and replace it with FireFox (please do, I will donate!). Does that sound familiar; for reasons such as this, I frequently fantasize about destroying IE. However, if you experience this issue, you can lay your thoughts of mass destruction to rest, because there is a simple solution: change the ID of your DIV to not be the same as the NAME of another element on the page.

continue reading article…

Permission Denied to Set Property XULElement.selectedIndex


Sorry for the late post this week. I have been working hard on the YUI storage project and the new release for Mint.com and did not finish my post in time. Todays article covers an issue you may experience when using the native DOMElement 'focus' and 'select' functions in FireFox.

If you have FireBug running, the exception is:

"Permission denied to set property XULElement.selectedIndex"

followed by a pointer to the offending line.

continue reading article…

Safari Regex Issue with $0-9 In Replacement Text


On a financial site, such as Mint.com, there are many opportunities to use regular expressions to replace numbers and currency. While replacing numbers with regular expressions will work fine, replacing US currency will cause issues that you should be aware of. The issues arise when using the "String.prototype.replace" method, because a dollar sign ('$') followed by a number is a back-reference to a captured parenthesis in the regular expression. Meaning that when the replacement string contains '$1', the '$1' will actually be a pointer to the content matched by the first parenthesis in the regular expression, instead of the string '$1'. Consequently, replacing some text with '$19.99', might not actually replace the text as intended. Here is an example:

continue reading article…

IE Issues to Avoid


As many of you know, Mint.com has just come out of beta with our new release (v8). During this last development cycle we revamped our transaction page to have an inline edit, instead of using div-based popup dialogs. This has been my baby for the past two months, and was a lot of work. During the design and development process most browsers behaved very well, but IE really gave me some problems. Today, I want to discuss those issues, so that you can avoid them in your own projects.

Opacity Crop:

continue reading article…