Saturday, April 19, 2008

Rocking javascript samples

Overview
To share sample code with all that I have leaned while working in .net

1) To Check/Un-check all checbox in a grid

function checkUncheck(chkBox)
{
var frm = document.forms(0);
var ctl = form.elements[chkBox];
if(null != ctl)
{
for(i=0;i(lessThan operator)frm.elements.length;i++)
{
if(frm.elements[i].type=='checkBox')
frm.elements[i].checked=ctl.checked;
}
}

2) To assign ENTER key to a command button/Image Button

The default button should be server side asp.net control and its onClick event will be fired when this function is called.

function onKeyDown(defaultButton)
{
if(event.keyCode==13)
{
with(event)
{
cancelBubble = true;
returnValue=false;
}
document.getElementById(defaultButton).focus();
document.getElementByID(defaultButton).click();
}
}


calling from aspx page:
call on Body tag onkeydown="onKeyDown('BUTTON ID HERE');"

3) Show/Hide Div on page

function showHide(show_hide)
{
var ctlDiv = document.getElementById('divID');
if(null != ctlDiv)
{
var divStyle = ctlDiv.Style;
style.display=show_hide;
}
else
alert ('control not found');
}


calling from aspx page:

on button1 : onclick="showHide('block');" ---to show div
on button2 : onclick="showHide('none');" ---to hide div


Hey!!! can u see me.. i m now visible

4) Get Client id of any asp.net control using javascript method

Following are conditions to get client ID of respective .net control
1) Container of that control should have some ID defined like if in 'td' then td id='someid'.
2) You should know about the TagName of that respective control when it renders on browser. i.e. asp:textbox control becomes INPUT, asp:Label becomes SPAN, etc

Thats it ...... now use the underlying methods to access the client id of respective .net control clientside... enjoy

function getId(ctrlId)
{
return document.getElementById(ctrlId);
}

function getElementsByTag(control,tagName)
{
return control.getElementsByTagName(tagName);
}
function getClientId(containerId,controlId, tagName)
{

var returnId=null;
var ctlContainer = getId(containerId);
if(null != ctlContainer)
{
var elements = getElementsByTag(ctlContainer,tagName)
if(elements.length>0)
{
for(i=0;i 0)
{
tmp = elements[i].id.split('_');
id = tmp[tmp.length-1];
if(id==controlId)
returnId = elements[i].id;
}
}
}
}
return returnId;
}


No comments: