after a request, page reloads 2 times and contains very little html

I just fixed a very strange issue in our application.

It went something like this:
User would click on a link that opened another page. This page would flash for a second, then another page would open containing just the string "2010".

The bug came from QA as being a regression related to recent development, so i started debugging in the code. There was nothing in the logs.

Then i opened firebug, went into "net" mode and persisted it. I saw my original request made, along with headers, and then another request made, this one had no headers at all.

Solution:

document.write is evil. There was recently a change to the code which attempted to make the copyright year dynamic by replacing it with
document.write(new Date().getFullYear());
inside of a script tag. This alone wouldn't cause the issue, but document.write only works correctly if its called when the page is being rendered. If the page is rendered, it will overwrite the entire page with whatever its writing out. The issue was the the page the user was going to next, was gotten via ajax, and thus the script was called after the page was loaded, overwriting the entire page.

Oh the glory of being a programmer.

Waiting for things in javascript

Problem:
Sometimes i need to wait for something to come into existence in javascript, and then do something with it. This is usually because another frame (shudder) is still loading and i need something in it. Also it helps with IE bugs where something should be there, but isn't because IE is taking a stupid long time to load it.

Solution:
Use this utility function to create a check/act loop.

javascript obfuscation

I might need this crazy javascript obfuscation one day. Either that, or its fun to look at:

http://discogscounter.getfreehosting.co.uk/js-noalnum.php?txt=alert%28%22hai%22%29

Charles Schwab reconcile button in online banking

I made a grease monkey userscript to add a reconcile button to chuck schwab online banking checking site, so you can balance your checkbook more easily.

Bank of America had this feature on their online banking website and i missed it, so i added it to chucks site.

Get the script here: http://userscripts.org/scripts/show/82095

jQuery: Detect Windows XP Theme

I started building a jquery dropdown widget, and i ran into a problem where i was not styling the dropdown arrow correctly because i developed the widget in the classic theme, but the xp theme styled widgets differently.

Clearly i needed to be able to assign different classes to my widget depending on the user's theme if i wanted the widget to look natural to that user.

The problem is that the user's theme setting is not something available through a javascript api call, nor is it in the user agent string. I used a javascript technique called feature detection to get this information. Here is how it works:

We create a button element and assign it background color called 'ButtonFace'. This is a special system color that is different depending on what theme you use. Next we need to get the computed color of the button element, and remove the element from the DOM. The idea is that a user in XP theme will have a slightly different colored button than a user in the classic theme.

I used some jQuery to make my life easier, but it would be easy to port this code to any other framework, or do it in plain javascript.


The code above plugin will create a new jquery.support object $.support.windowsTheme which contains a name member that will be set to 'xp' if user is using the XP windows theme, 'classic' if they are using the classic theme, and undefined if they are using a custom theme, or another operating system.

To see this code in action look at this demo page

For further updates to this code please visit the jquery plugin page

Caveats:

• This code does not check if the user is actually using windows, you would need to add that check yourself.
• I have tested this code in firefox 3.6 and IE6,7 on windows XP. This code should really be also tested on Vista and Windows 7.

See also:
It has come to my attention that someone has already done this before

Javascript: insert table rows / table body

If you write lots of javascript, there will someday come a time when you need to do one of the following DOM manipulations:

• Insert a new table body, discarding the old one
• Insert some number of table rows after some given row

This can be easily accomplished using a javascript library like jQuery, but there is a major downside to this: very bad performance! (for big chunks of html)

The reason for this is that a library like jQuery must preform all sorts of checks for all sorts of corner cases, such as checking if the html you are inserting contains script blocks and running them if your browser does not support script eval (IE6 - 7). It must clean each string before turning it into DOM objects.

For this reason, it is better to use plain javascript to write all the table manipulation functions, and make assumptions about the html you will be inserting (so you dont have to clean it). Here is a collection of such functions that i have used in production code. They are on average 2 or 3 times faster than using jQuery for the same insert.

Inserting table rows after a row

Example Usage:

You can insert 1 or more rows this way.

Replacing a table body with a new table body
Note: html does not include the actual tbody tag, just the rows and columns.



Another function that I often use is a helper function for replacing the table body to be used with jQuery's ajax functions:


Caveats of using these functions:

• On browsers that dont support scriptEval, scripts that are inserted into the table body will not be executed upon insertion. You will need to deal with them yourself. I usually include them in a hidden input with a predefined ID, and then eval the value of that input after insertion.
• Leading and trailing whitespace counts as a DOM node in IE, and will have weird effects if the html used in these methods contains it. If you are in charge of creating the html you insert, make sure it doesnt have unneeded whitespace between and around nodes.
• I dont know if liveQuery plugin will know about these dom modifications.
  

Form submitted unexpectedly on enter

Problem:
I have a form that would be submitted when i pressed enter in a text input field. It would skip over all my validation that i was doing in the input's onKeyDown callback function. I removed the onKeyDown event handler, and still the form would be submitted on enter. The input was not a submit type input so the submission was not expected.

Solution:
This problem stemmed from the fact that the input box in question was the only text type input box on the form. The HTML4 spec states that if you have one input box of type text, pressing enter in this input box will submit the form!

I solved this by adding another input of type text with style="display:none" and a name:

<input type="text" style="display:none" name="dummyinput" value="" id="dummyinput" >

The reason for this hack being that I had bound on-enter handlers to the first inputfield of my own, and trying to prevent those would break my code also.

Multidimensional hashes in javascript

When i first started out with javascript i had no idea how to make a multidimensional array or a hash. Then, for a while i did not know how to use it properly after creating it. Now that i _think_ i know what i am doing i want share this very useful knowledge with the world.

First things first. A hash is the corner stone of all javascript objects and it is easy to create:

Each of the above is a perfectly valid way to create and access a hash. Quotes around the name allows you to use reserved words as the name, such as "function".

One thing to note here, is that the name must be either a string or a number, if its a number, you are better off using an array (if all your other keys are numbers too). This means that the name cannot be an object.

Now lets create a hash with more than one dimension. The function below is used to both init and add to a 3D hash.

We make sure not to access any elements that are undefined / not an object.

Now all we have left is a function to get values from our hash. This is not as straight forward as it may seem
The first statement is wrong, because if any of the 3 values passed in does not exist in the hash, you will try to access a property of undefined, causing an error. The second statement makes sure that each dimension exists before trying to access it, and finally returns either the value you want, or undefined.

Thats it!

cross browser key events in javascript

this is a pure JS solution that lets you get the key code from an event, it works for all browser:

IE beeps on enter in an input

Problem:
I have an input box where the onKeyDown event will check if the key pressed was enter, and submit the form on enter. This works fine, but in IE 7 the browser beeps when you press enter, and submits the form.

Solution:
This happens because 'enter' is not valid within the context of an input box, according to IE. Thus, pressing it will cause the beep. What you need to do to remove the beep, is to return false from the function which does the submit. It looks something like this:

<input onkeydown="return postOnEnter(event)"/>



obviously, i am calling some custom functions in the snippet above, but the location of the return statements, and their values is all that matters.

jQuery: constrain input chars plugin

Problem:
you need to only allow the user to input certain characters into the input box, and you want a jquery plugin to do it!

Solution:




the following lets you specify which chars (regexes or'ed together) are allowed in the input.

i added a small demo for the plugin, check it out here

get the plugin here

Debug Javascript in IE

When googling for best ways to debug javascript i found that there are plenty of articles out there about it, but most are old, and some that give bad advice.

Here is what i found works in August 2008 (with updates from Jan 2010 at the bottom):

For inspecting DOM:

• Best: Firebug lite - gives you most of the dom inspection features of firebug, in IE. Lacks on the fly editing of dom, but shows computed styles well, allows to select elements on mouse over. Can sometimes be slow.
  
• Useful: IE Developer Toolbar - Also allows to inspect DOM, but the interface sucks. You can change styles on the fly with about 10 mouse clicks per change. Allows you to see the "generated source" as IE sees it. This tool is nice when firebug lite is being slow
  
• Not so good: Debug Bar - I found that this is not very good for DOM inspection, it lacks most features that the above 2 tools have. It does seem to be in constant development, so it might be good to check it out.

For debugging javascript:

• Bestest-est: Microsoft Visual Web Developer 2008 Express - There is a pretty good tutorial on how to set this up on this blog (make sure to read the comment by James if you are a firefox user). This gives you a debugger as good if not better as Frontpage's for free. It is somewhat more painful to set up and use because you have to run the actual visual web dev program. Cant beat free though.
  
• Best: Microsoft Frontpage 2003 (script editor) - After installing frontpage 2003, you can use the debugger that comes with it, it has the following useful features: breakpoints, watches, evaluation, viewing the stack and a few other features i havent looked at yet. This is the best script debugger for IE.
• Useful: Companion JS - This tools seems to be able to pinpoint the line number where a javascript error occurs better then the script editor. This is actually really useful because IE sucks at telling you what the error is, and what line number it is on. It can do evaluations, but does not really have breakpoints or anything else useful. The error reporting is really good though. NOTE: you will need to disable this debugger in order to use any of the other ones.
  
• Worthless / Horrible: Script Debugger - God this tool sucks. It is the worst excuse for a debugger ever. You cant set watches. The evaluator sucks.

For making your life suck less:

• Matt pointed out a little javascript he wrote to quickly show you the generated sourcecode in IE.
• Erik mentioned an IE 7 plug-in to make IE have some modern browser features. For some reason this is the first time ive heard about this thing. Pretty sweet, i see no reason not to install it.

edit 7/29/2009:
Finally i found a good javascript console that works in IE. It does a few extra things other then giving you expression evaluation. its good.

edit 1/14/2010:
Found an even better bookmarklet that gives you on-the-fly css editing in IE6 etc! Looks like firebug when loaded, and has DOM inspection like firebug. Very nice. No JS debugger because its a bookmarklet, but a very useful tool for the toolbelt indeed. Dungbeetle

Javascript: matching with regex

There seem to be 3 ways to use regular expressions in javascript:
1.
var val = document.getElementById("some_id").value;
val.replace(/^\s+|\s+$/g, ""); //trim using regex
2.
var alpha = /^[A-Za-z]+$/ ;
var val = document.getElementById("some_id").value;
if(alpha.test(val)){
//val matches alpha
}
3.

var val = document.getElementById("some_id").value;
var alpha ='((?:[a-z][a-z]+))'; // Word 1
var p = new RegExp(alpha,["i"]);
var m = p.exec(val);
if (m.length>0)
{
   var word=m[1];
   //word is the capture group 1
}

if anyone knows a better way, feel free to share.