How to avoid the javascript alert on error when using UpdatePanel with Timer

By default on error during async request UpdatePanel shows an annoying alert messagebox. There is a way to avoid that and handle errors on your own. Here is how to handle errors in ASP.NET AJAX (This is not only for UpdatePanels). The trick is to add handler to endRequest to the PageRequestManager:

<script type="text/javascript">
function EndRequestHandler( sender, args )
{
if ( args.get_error() != undefined )
{
// set error is handled in order to avoid the messagebox
args.set_errorHandled( true );
}
}

function AppLoad()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest( EndRequestHandler );
}

Sys.Application.add_load( AppLoad );
</script>

Use className="myclass" rather than setAttribute("class", "myclass")

I had to build dynamic html using javascript and I came up with this problem - setAttribute("class", "myclass") didn't work. You should use className instead. The same with setAttribute("onclick","myfunc") - will not work. You should use onclick directly.

Great Javascript Resources

Here are some of the javascript resources I found on the net.

Yahoo! User Interface Library - a huge library with many controls and functions, including animation, effects, menus, calendar and so on.

script.aculo.us - has some basic effects that are really nice to use like fading in, fading out, folding, shaking, pulsating and so on.

Smooth Gallery - a great piece of javascript code that is perfect for showing pictures.

Lightbox2 - great for showing photos!

Shadowbox - ideal for photos or galleries, shows even flash and movies.

Carousels for showing large content.

Buttons Hover Effect With Javacript

I have a lot of pages that have buttons and I wanted to have mouse over effect without setting onmouseover and onmouseout in the html source. The best, of course, would be to use css style like a:hover, but I don't think this is going to work with older browsers. So, I used dynamically attaching to events for all buttons that have the same css class - 'inputButton' for example. I have two functions overBtn and outBtn that change the className of the button to 'inputButtonHover' on mouseover and back to 'inputButton' on mouseout. Here is the code:

<script type="text/javascript">
function overBtn( e )
{
var target = getTarget( e );
target.className = 'inputButtonHover';
}

function outBtn( e )
{
var target = getTarget( e );
target.className = 'inputButton';
}

function getTarget( e )
{
if ( window.event )
{
target = window.event.srcElement;
}
else if ( e )
{
target = e.target;
}

return target;
}

var buttons = document.getElementsByTagName( 'input' );

if( typeof window.addEventListener != 'undefined' )
{
//.. gecko, safari, konqueror and standard
window.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof document.addEventListener != 'undefined' )
{
//.. opera 7
document.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof window.attachEvent != 'undefined' )
{
//.. win/ie
window.attachEvent( 'onload', MouseOverEffect );
}

function MouseOverEffect()
{
for ( var i = 0; i < buttons.length; i++ )
{
if( ( ( buttons[i].type == 'submit' ) ( buttons[i].type == 'button' ) ) && ( buttons[i].className == 'inputButton' ) )
{
if ( buttons[i].addEventListener )
{
buttons[i].addEventListener( "mouseover", overBtn, false );
buttons[i].addEventListener( "mouseout", outBtn, false );
}
else if ( buttons[i].attachEvent )
{
buttons[i].attachEvent( "onmouseover", overBtn );
buttons[i].attachEvent( "onmouseout", outBtn );
}
else
{
buttons[i].onmouseover = overBtn;
buttons[i].onmouseout = outBtn;
}
}
}
}
</script>