Archive for the Javascript Category

Next Entries »

How to disable Anchor tag in IE and Firefox?

Posted in ASP.NET, Javascript with tags , , on September 16, 2009 by hspinfo

I have searched many sites for to disable anchor and I know that IE supports ‘disable’ property for anchor tag, however Firefox does not support this. So whenever you try with ‘disable’ property of an anchor tag “<a></a>” you will get proper output in IE browser but not in Firefox browsers.

I have found a very good article which disables the anchor tag using few tricks because without tricks it is not possible to mange disable anchor in Firefox. You can find this article here. However, you can copy the same javascript script of above article as below.
function disableAnchor(obj, disable){
if(disable){
var href = obj.getAttribute("href");
if(href && href != "" && href != null){
obj.setAttribute('href_bak', href);
}
obj.removeAttribute('href');
obj.style.color="gray";
}
else{
obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
obj.style.color="blue";
}
}
Also note that you can perform the same thing on the code behind (for asp.net) if you are using a server control for anchor tag and you want to disable the anchor, you just need to remove the ‘href’ property using  MyAnchor.Attributes.Remove("href") and then just apply gray color to anchor and its done. It will work in both IE and Firefox (javascript and server code both).

Happy Programming!!

3 Comments »

Auto refresh the page and keep the viewstate of the page on each refresh

Posted in ASP.NET, Javascript with tags , , , , on August 21, 2009 by hspinfo

Today I am writing about how you can auto-refresh the page and still how you can manage the view-state of the page.

There may be requirement to fill up a long lasting form and this might take you a longer time to think or type. Now the general problem that occurs while filling up this kind of form is when you submit the form the session got expired or the timeout event occurs. So to overcome this situation we can set some timer to that particular page for refresh so that after several minutes it got refreshed automatically and we did not face any timeout or session related issues.

Now there are several ways to auto-refresh the page, the one is to put meta tag like <meta http-equiv="refresh" content="600">. What this tag will do is it will refresh the page after every 10 minutes, but when the page gets refresh then it will not persist the view-state of the page. This means if you are filling up any form and the page gets refreshed then you will not able to get all the filled content and the page will get loaded in its original form.

There was one requirement where I need to auto refresh the page as well as need to keep the view-state of the page. To achieve this I have put a simple JavaScript code on BODY tag of my page as below:

<Body onload="setTimeout('Form1.submit();', 600000);">
<form id="Form1" method="post" runat="server">

Here this JavaScript method “setTimeout()” will submit your form data after every 10 minutes and the page will also get refreshed so that it will also persist the view-state of the page after auto refresh of the page. Please note that the time 600000 here is in milliseconds. (1 second = 1000 milliseconds)

Happy Programming!

1 Comment »

If I put alert() message then my javascript works fine otherwise script is not working

Posted in Javascript with tags , on January 12, 2009 by hspinfo

When you deal with the javascript and when you are using any form elements of the page in the script then you better make sure that your whole page gets load first. The form elements that you are using into the script will only get used until the page loads completely.

I have faced one situation where I was using popup window and was transferring the data of parent window to the opened popup. I have created one function into the popup window which will set some values into the text elements of the popup. I am calling this function from the parent window by passing some arguments to that function.

Now what happen is, when I am calling this function by putting some ‘alert()’ messages into the caller function and called function then the script is working fine for me. And when I am removing the ‘alert()’ message box from the script, the script stop working.

When I have analysis the script and debug it, I found that when I am calling a popup function from my parent window, the function did not set values into the text elements of the popup. This is because the popup window is not loaded completely. When I am putting an ‘alert()’ message box, the popup window gets sufficient time to load while I am busy clicking on the OK button for the alert message.

Thats it… I found that I was writing the script for the form elements which are not yet loaded into the popup and thats why I am getting this issue. I have resolved this issue by calling the javascript function of the popup only after it gets loaded completely.

If you found any similar issue then you can discuss here, I will try to solve it out.

Happy Programing!

7 Comments »

javascript: Word Counter

Posted in ASP.NET, Javascript with tags , , , , on December 19, 2008 by hspinfo

Few months back I have posted one article on “Javascript: Maximum character validation and character counter for a textbox”, now here I have given one example on how to count words out of any textarea or textbox.

The counter of word will get incremented as you type in each word (one spell) into the textbox/textarea. This script will also work when anyone copy/paste the text into the textbox (copy/paste should not through mouse). Check the following script:

<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" TextMode="multiLine" MaxLength="100"
runat="server" onkeyup="javascript:WordCounter(this.id,'Label1');"
onblur="javascript:WordCounter(this.id,'Label1');"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="100 chars
remaining"></asp:Label>
</div>
<script language="javascript" type="text/javascript">
function WordCounter(textId,lblID)
{
var this_field = document.getElementById(textId);
var label = document.getElementById(lblID);
var char_count = this_field.value.length;
var fullStr = this_field.value + " ";
var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");
var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi;
var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");
var splitString = cleanedStr.split(" ");
var word_count = splitString.length -1;
if (fullStr.length <2)
{
word_count = 0;
}
if (word_count == 1)
{
wordOrWords = " word";
}
else
{
wordOrWords = " words";
}
if (char_count == 1)
{
charOrChars = " character";
}
else
{
charOrChars = " characters";
}
label.innerHTML = word_count + wordOrWords;
}
</script>
</form>
</body>

Happy Coding!!

Leave A Comment »

Enable or disable DIV tag and its inner controls using Javascript

Posted in Javascript with tags , , , on September 3, 2008 by hspinfo

Today, I was searching for a solution to enable/disable DIV element using javascript. I have tried so many code, but all are working in IE only and not supported by FF (firefox). At last I found some solution which is helpful. I thought this might also useful to you.

Copy/Paste following javascript code snippet.
<script type="text/javascript">
function toggleAlert() {
toggleDisabled(document.getElementById("content"));
}
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>

Copy/Paste following HTML code in BODY tag:

<div id="content">
<table>
<tr>
<td><input type="text" name="foo" /></td>
</tr>
<tr>
<td>
<select name="bar">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</td>
</tr>
</table>
</div>
<input type="checkbox" value="toggleAlert()" onclick="toggleAlert()" />

Here, I have used one checkbox, by clicking which you can enable/disable child controls of a DIV. However, you can use any element other than checkbox (e.g button, radio button, etc…)

10 Comments »

Javascript: innerText not working in FireFox and Safari

Posted in Javascript with tags , on September 1, 2008 by hspinfo

Today, I came to know that innerText property of any web control is not supported by FireFox and Safari browser. Here, I found the alternate solution for innerText property.

Use the following code in javascript to acquire the same functionality as innerText.
var myText = document.getElementById(’divText’).textContent; // same as innertext.

4 Comments »

Use Javascript to detect enterkey press event and submit the form

Posted in ASP.NET, Javascript with tags , on September 1, 2008 by hspinfo

This code is useful in almost all kind of forms that has a submit button. When any user press “Enter key” also called a Return key in a textbox, this code will detect if the Enter key is pressed or not and will perform the same action as directed in a code of Submit button. Type the following javascript code befor a “body” tag.

function DetectEnterPressed(e) {
var characterCode
if(e && e.which){ // NN4 specific code
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode // IE specific code
}
if (characterCode == 13) return true // Enter key is 13
else return false
}

Type the following line of code in a code behind file. You can put this code in a page_load method and outside the IsPostBack event.

txtPassword.Attributes.Add("onkeypress","javascript:return DetectEnterPressed(event);");

1 Comment »

Get CheckBoxList values using Javascript

Posted in ASP.NET, Javascript with tags , , on August 14, 2008 by hspinfo

Today I have spend lot of time to get the values of each item of CheckBoxList using javascript. And finally I got success.

What I want to do is:

I have one CheckBoxList control that binds values at runtime from the database, and when I click on a button from the page, I want to get the values (Database Primary Key) from the CheckBoxList, but for the checked checkboxes only.

Here is the code, what I have achieved so far. This code works fine with IE 7, but I am not sure with the FireFox.

ASPX page: <asp:CheckBoxList ID="CheckBoxList1" runat="server" OnDataBound="CheckBoxList1_DataBound" >
<asp:ListItem Value="First1" Text="First" ></asp:ListItem>
<asp:ListItem Value="second2" Text="Second"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button ID="Button1" runat="server" Text="Button" />
<script language="javascript" type="text/javascript">
function CheckItem()
{
var tbl = document.getElementById('<%= CheckBoxList1.ClientID %>').childNodes[0];
for(var i=0; i<tbl.childNodes.length;i++)
{
for(var k=0; k<tbl.childNodes[i].childNodes.length; k++)
{
if(tbl.childNodes[i].childNodes[k].nodeName == "TD")
{
var currentTD = tbl.childNodes[i].childNodes[k];
for(var j=0; j<currentTD.childNodes.length; j++)
{
if(currentTD.childNodes[j].nodeName == "SPAN")
{
var currentSpan = currentTD.childNodes[j];
for(var l=0; l<currentSpan.childNodes.length; l++)
{
if(currentSpan.childNodes[l].nodeName == "INPUT" && currentSpan.childNodes[l].type == "checkbox")
{
var currentChkBox = currentSpan.childNodes[l];
if(currentChkBox.checked)
{
alert(currentSpan.alt);
}
}
}
}
}
}
}
}
}
</script>
Code Behind:

Button1.Attributes.Add("onclick", "javascript:CheckItem();");
CheckBoxList1.DataSource = <Your Dataset>;
CheckBoxList1.DataTextField = "PersonName";
CheckBoxList1.DataValueField = "PersonID";
CheckBoxList1.DataBind();
protected void CheckBoxList1_DataBound(object sender, EventArgs e)
{
CheckBoxList chkList = (CheckBoxList)(sender);
foreach (ListItem item in chkList.Items)
{
item.Attributes.Add("alt", item.Value);
}
}

8 Comments »

Javascript: Maximum character validation and character counter for a textbox

Posted in ASP.NET, Javascript with tags , , on August 14, 2008 by hspinfo

Here I have provided a solution to put a counter for a textbox, that can be updated as each character typed into the textbox. This script will also validate the maximum character length allowed for a textbox. This script will also work when anyone copy/paste the text into the textbox. Textbox can be either single line or multi line. Check the following script:
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" TextMode="multiLine" MaxLength="100" runat="server" onkeyup="javascript:CharCounter(this.id);" onblur="javascript:CharCounter(this.id);"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="100 chars remaining"></asp:Label>
</div>
<script language="javascript" type="text/javascript">
function CharCounter(textId)
{
var totalchar = '<%= TextBox1.MaxLength %>';
var txtbox = document.getElementById(textId);
var lbl = document.getElementById('<% =Label1.ClientID %>');
if(txtbox.value.length > totalchar)
{
txtbox.value = txtbox.value.substring(0,totalchar);
}
lbl.innerText = (totalchar - txtbox.value.length) + " chars remaining" ;
}
</script>
</form>
</body>

Happy Coding!!

10 Comments »

Using CustomValidator control in ASP.NET

Posted in ASP.NET, Javascript with tags , , , , on August 5, 2008 by hspinfo

CustomValidator is a very useful control that can be used for client side as well as server side validation for the code. There might be some requirement on the server side to check some conditions and perform some action. Here, I have provided one example of the CustomValidator to check the server side as well as client side code.

To check the server side method/function using CustomValidator, you need to provide a server method name to the property “OnServerValidate” (i.e. OnServerValidate = “MyServerMethod”), and for client side code you can set the client method name to the property “ClientValidationFunction” (i.e. ClientValidationFunction = “MyClientMethod”).

On a button click event code, first you need to check the condition for Page.IsValid, as server side method will set Page.IsValid = false when a condition is not matched as requirement and hence will throw the message written in a CustomValidator control. The client side code will be executed first and if it executes successfully with valid arguments, then only the server side method will be checked further.

Check the following code which describes how to use CustomValidator.

<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
<script runat="server">
void ValidateBtn_OnClick(object sender, EventArgs e)
{
if (Page.IsValid)
{
lblOutput.Text = "Page is valid.";
}
else
{
lblOutput.Text = "Page is not valid!";
}
}
void ServerValidation (object source, ServerValidateEventArgs arguments)
{
int i = int.Parse(arguments.Value);
arguments.IsValid = ((i%2) == 0);
}
</script>
</head>
<body>
<form runat="server">
<h3>CustomValidator Example</h3>
<asp:Label id=lblOutput runat="server"
Text="Enter an even number:"
Font-Name="Verdana"
Font-Size="10pt" /><br>
<p />
<asp:TextBox id="Text1"
runat="server" />
&nbsp;&nbsp;
<asp:CustomValidator id="CustomValidator1"
ControlToValidate="Text1"
ClientValidationFunction="ClientValidate"
OnServerValidate="ServerValidation"
Display="Static"
ErrorMessage="Not an even number!"
ForeColor="green"
Font-Name="verdana"
Font-Size="10pt"
runat="server"/>
<p />
<asp:Button id="Button1"
Text="Validate"
OnClick="ValidateBtn_OnClick"
runat="server"/>
</form>
</body>
</html>
<script language="javascript">
<!--
function ClientValidate(source, arguments)
{
if ((arguments.Value % 2) == 0)
arguments.IsValid=true;
else
arguments.IsValid=false;
}
// -->
</script>

2 Comments »

Next Entries »