Archive for the ‘Javascript’ Category

This content is password protected. To view it please enter your password below:

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!!

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!

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!

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!!

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…)

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.