Log4javascript - Logging on the client side

Being an ardent fan of Log4J and Log4Net frameworks, I was pleased to see a port of the framework on Javascript for client side logging - log4javascript

With the plethora of pure JS web frameworks in the market today, it's very important to have a solid reliable logging framework on the client side (browser) that would enable us to debug problems easily. The default way to display log messages is in a separate popup window, featuring advanced search and filtering functionality, as well as a command line. You can also log to an in-page log4javascript console, to Firebug, to the browsers built-in error consoles or back to the server via Ajax POST.

I liked the OOTB Ajax appender that could be used to asynchronously post messages back to the server. We would need to write the server side code for the service. This is not included by default in the library.

A few organizations are using MongoDB to store log files. Having both client-side and server-side logs stored in a document database can be very useful for audit and debugging purposes. 

Cool Cool JS toolbox

Just found this good website having tons of cool JavaScript tools - free for commercial use too.
http://www.dynamicdrive.com/
Check out the dynamic menus - always needed in any web-site development.

Setting focus on the first field

Whenever a HTML page is loaded, we often want to set the focus on the first input field of that page. Came across this Javascript code that can be put in a JS file and reused everywhere.
http://www.codeproject.com/jscript/FocusFirstInput.asp Simple and Sweet solution :)

HTML menu DIV tag over a SELECT element

We are using a JS menu that used layers created by div tags. The problem was that this layer was hiding behind behind 'select' dropdowns in the page.

I googled around for a solution and found out 2 solutions:
- Hide the select boxes when the menu is clicked and unhide them when the menu rolls back.
- Use the zIndex property and create a transparent IFrame under the menu layer.

The following links were of great help to me:
BEA portal menu.
IFrame option.
Hiding option.

Javascript goodies

Today, I spend quite some time refactoring messy Javascript code:

1.) I needed to extract a number appended to the end of the string - use the power of regular expressions to make this one clean and sleek.

var RowIdNumber = rowId.match(/\d+$/)[0];

2.) To obtain a 'anchor' element inside of a table row and invoke it's click (href) -

rows[i].getElementsByTagName("a")[0].click();

Enjoy :)

Cool collection of JS code

Found this link that contains a cool collection of Javascript code. Worth a perusal.

I liked the fee menu javascript code available here:

http://javascriptkit.com/script/cutindex23.shtml

JS library for dates

I was looking for a reusable JS function that would allow me to format and compare dates just the way it is done in Java using classes such as DateFormat, Date etc.

I found this JS file on the web - simple and easy to use. And quite powerful too:
http://www.javascripttoolbox.com/lib/date/

Javascript: Conditional Comments and Conditional Compilation

Recently came across some cool new features of Javascript that reduced the amount of coding required. For many years, developers have been writing Javascript code to detect the browser type and accordingly fire javascript functions or do a document.write()

But now there are more developer-friendly ways of detecting the browser type and handling content.
Conditional Comments: These look like HTML comments, but IE browsers treat them differently.
For e.g.
<!--[if IE]>You are using IE (IE5+ and above).<![endif]-->
The above line would be rendered only if the browser is IE.

To render something if the browser in non-IE use the following:
<![if !IE]>You are NOT using IE.<![endif]>

We can also check the IE version number:
<!--[if IE 6]>You are using IE 6!<![endif]-->

Another feature of IE is Conditional Compilation. Non-IE browsers would ignore the @cc block
/*@cc_on
/*@if (@_win32)
document.write("OS is 32-bit, browser is IE.");
@else @*/
document.write("Browser is not IE (ie: is Firefox) or Browser is not 32 bit IE.");
/*@end@*/