IE6-IE7 Radio Button JQuery Problem: Selection does not work

Sometimes we need to create html radio button control. If we need to create radio button dynamically based on some other condition, we will surely create it using JavaScript. Using JQuery definitely makes our JavaScript life easier. We sometimes need to create the radio button group and want to have some event handler assigned to it. Here we will see the usual problems we might face while creating radio button using JQuery, especially for IE6 and IE7.

Problem with Radio button group creation using JQuery:

If we develop and test at IE8 environment, we might code like this and this work.
I have a RadioGroup container div.

<div id="RadioGroupHolder">&nbsp;</div>

I want to have 3 radio buttons inside this div dynamically.

function Dynnamic_RadioGroup_Using_JQuery() {

var $PFS = {};

var RadioGroup_Click_EventHandler = function(e) {

$PFS.measure = $(this).attr('value');

}

var count = 1;

var radioDOSE = $('<input type="radio" value="DOSE">Per dose</input>')

.click(RadioGroup_Click_EventHandler)

.attr('name', 'RadioGroupName_' + count);

var radioKG = $('<input type="radio" value="KG">Per Kg</input>')

.click(RadioGroup_Click_EventHandler)

.attr('name', 'RadioGroupName_' + count);

var radioM2 = $('<input type="radio" value="M2">Per m2</input>')

.click(RadioGroup_Click_EventHandler)

.attr('name', 'RadioGroupName_' + count);

$('#RadioGroupHolder')

.append(radioDOSE)

.append(radioKG)

.append(radioM2);

}

I am testing this code in IE8, it will show the below radio buttons.



This works perfectly without any problem. But while testing this same code in IE6 and IE7, this will have some problem. Clicking on radio buttons will not select the radio button. It will always keep it unselected.


Resolution to the radio group creation problem using JQuery:

There are 2 problems for which the code is not working in IE6 and IE7.

1. Note the code for creating one radio button.
   
   

   var radioDOSE = $('<input type="radio" value="DOSE">Per dose</input>')

   .click(RadioGroup_Click_EventHandler)

   .attr('name', 'RadioGroupName_' + count);

   The yellow marked section is first creating the DOM element, but not yet inserted in DOM. See that we have a closing input tag</input>. Surely this is not valid. HTML input tags don't have a closing input tag. It should end like this.
   
   
   <input type="radio" value="DOSE" />
   
   But IE8 is good enough to handle this and it can create the DOM correctly whereas IE6 and IE7 do not. This may make any unexpected problem later on. So we can easily avoid doing mistake. But what about the Per Dose text that we want to see beside the radio button. If we end input tag, we have to write the text showing beside the radio button separately, not inside the opening and closing input tag.
2. The second problem with the code is
   
   

   var radioDOSE = $('<input type="radio" value="DOSE">Per dose</input>') 

   .click(RadioGroup_Click_EventHandler)

   .attr('name', 'RadioGroupName_' + count)

   
   

   We must have a name for the radio buttons. To make the radio buttons selection exclusive, meaning we will be able to select only one radio button from the group, we must make the name of the radio buttons same. Here what we are doing is creating the radio button first then assigning a click eventhandler, then assigning the name. No problem, infact. IE8 works fine. But in IE6 and IE7, if we create a radio button without giving the name and later assign the name, IE6 and IE7 cannot make the radio group and it does not work when we click the radio buttons.

   
   

   So we need to give name of the radio buttons at the beginning while we are creating the object.

   
   

   var radioDOSE =$('<input type="radio" value="DOSE" name="' + 'RadioGroupName_' + count + '"/>')

   .click(RadioGroup_Click_EventHandler);

var radioKG = $('<input type="radio" value="KG" name="' + 'RadioGroupName_' + count + '" />')

.click(RadioGroup_Click_EventHandler);

var radioM2 = $('<input type="radio" value="M2" name="' + 'RadioGroupName_' + count + '" />')
.click(RadioGroup_Click_EventHandler);

Doing this will resolve our problem in IE6 and IE7. Pretty easy fix, but difficult to know that this works. But yes, it works.

JavaScript Object Array Sorting: Using Custom Comparison Function

Array is a very necessary data structure for programming. In JavaScript also, we have Array Object. It is quite natural that we will need to sort the elements of the array, sometimes in ascending order or descending order. While it is an array of string, it is easy to do the sorting. We have a sort method in the array object and that can do our job. But when we have an object array and we need to sort the objects based on some custom defined nature, we need to think a bit more. We will see some examples of array sorting in this post.


Declaring a JavaScript Array:

We can declare a blank array as follows:

var js_array = [];

There is another alternative for declaring a blank array.

var js_array = new Array();

If we need to have an array with some initial values, then we can do it as follows:

var js_array = [1, 20, 3, 12, 21, 5];

var js_array = ['item 3', 'item 1', 'item 2', 'item 5', 'item 4'];

Creating an Array of objects:

Suppose we have a Pair Class defined as below. The Pair class takes to parameters. One is x and the other is y. The Pair class contains a method tostring(). Infact, every object has a tostring()method. But for our class, we want it to show a string of our own. This toString() method returns a string in the form of (x, y).

function Pair(a, b) {

this.x = a;

this.y = b;

this.toString = function() {

return '(' + this.x + ', ' + this.y + ')';

}

}

So if we want to create an array of Pairs, we can do it easily. We can create a Pair object as

var aPair = new Pair(rand_x, rand_y);

var js_obj_array = [];

for (var i = 0; i < 10; i++) {

var rand_x = Math.round(Math.random()*100);

var rand_y = Math.round(Math.random() * 100);

js_obj_array.push(new Pair(rand_x, rand_y));

}

Sorting a JavaScript Array:

Now we will see how to sort an array. Really simple.

var js_array = ['item 3', 'item 1', 'item 2', 'item 5', 'item 4'];

alert(js_array.join(','));

//the result will show

//item 3,item 1,item 2,item 5,item 4

js_array.sort();

alert(js_array.join(','));

//the result will show

//item 1,item 2,item 3,item 4,item 5

This is good. But if we try to sort an array with some numbers, we have some problem.

var js_array = [1, 20, 3, 12, 21, 5];

alert(js_array.join(','));

//the result will show

//1,20,3,12,21,5

js_array.sort();

alert(js_array.join(','));

//the result will show

//1,12,20,21,3,5

We see here that the array is not sorted properly. It is infact sorting the numbers in lexicographical order. This is surely not what we expect. So need some work around to do a correct sorting.
The sort method in Array accepts a function, a comparison function. We can define this ourselves to decide which element is smaller and which element is larger. The comparison function must return negative number to indicate that the former element is smaller than the later element. It must return positive number to indication that the former element is larger than the later element. It must return 0 to indicate that both the elements are equal.

var int_comparison = function(a, b) {

return a - b;

}

var js_array = [1, 20, 3, 12, 21, 5];

alert(js_array.join(','));

//the result will show

//1,20,3,12,21,5

js_array.sort(int_comparison);

alert(js_array.join(','));

//the result will show

//1,3,5,12,20,21

We can also do it using anonymous function. No need to have a separate function defined.

var js_array = [1, 20, 3, 12, 21, 5];

alert(js_array.join(','));

//the result will show

//1,20,3,12,21,5

js_array.sort(function(a, b) {

return a - b;

});

alert(js_array.join(','));

//the result will show

//1,3,5,12,20,21

So infact what we are doing is just telling the sort method not to decide the position of the elements using default comparison, but to use our method to decide which element is smaller and which is larger.


Sorting Array in descending Order:

Now if we want to sort the array elements in descending order, it is quite simple.

var js_array = [1, 20, 3, 12, 21, 5];

alert(js_array.join(','));

//the result will show

//1,20,3,12,21,5

js_array.sort(function(a, b) {

return b - a;

});

alert(js_array.join(','));

//the result will show

//21,20,12,5,3,1

Sorting Array of Objects:

We have already created an array of Pair objects. There is no default sorting for this. Because, there is no way for the sort method to know which element is smaller and which is larger.

var js_array = [];

for (var i = 0; i < 10; i++) {

var rand_x = Math.round(Math.random()*100);

var rand_y = Math.round(Math.random() * 100);

js_array.push(new Pair(rand_x, rand_y));

}

var comparison_function = function(a, b) {

if (a.x < b.x)

return -1;

else if (a.x > b.x)

return 1;

else if (a.y < b.y)

return -1;

else if (a.y > b.y)

return 1;

else

return 0;

}

alert(js_array.join(','));

//the result will show

//(68, 23),(12, 53),(49, 55),(38, 48),(70, 62),(9, 97),(67, 91),(12, 63),(46, 77),(41, 33)

alert(js_array.sort().join(','));

//the result will show

//(18, 87),(2, 16),(24, 55),(26, 40),(58, 55),(63, 13),(66, 16),(72, 44),(72, 55),(85, 69)

alert(js_array.sort(comparison_function).join(','));

//the result will show

//(2, 16),(18, 87),(24, 55),(26, 40),(58, 55),(63, 13),(66, 16),(72, 44),(72, 55),(85, 69)

First we see the random Pair generated. Without the comparison method, we see that the array is sorted again using the string comparison. Class Pair has a toString defined. The sort method took the string for every element and then it used a simple string comparison and sorted the array. But we want a different sorting. So we defined the comparison_function. It is very important to notice how we used the objects in the comparison function. The sort method will send the elements of the array to our comparison function. As the elements are objects, so we will receive object of type Pair. Now we can easily access the properties of the objects and can write any algorithm we want to use for our sorting. But we have to be careful that our comparison function must return negative, positive and 0 as we mentioned earlier.
So this way we can infact sort any object array, any way we want.

Changing the default plus sign to minus while the report is still expanded: InitialToggleState

While creating a group in sql server reporting service with expand collapse feature, we may find that report is showing a plus image while the group under that is displayed. This is not logical. While the group is displayed or in other words the group is expanded, it should show a minus sign that indicates this group can be collapsed. But in SSRS, the default image is plus. So definitely we would like to change the image.

 
The following steps will let us change the image.

1. In the report designer tab, we click on the text_box that is showing us the country group.
   
2. Go to the properties panel. Make sure that you still have your country textbox selected.
   
3. There is a property named InitialToggleState. This is set to False, by default. That's why, the image is showing a plus sign while the report is first rendered. Set this InitialToggleState to True.
4. Now see the preview and you will get the desired minus image while the report is first rendered. Now every toggle operation will expand or collapse the group and the image will also show correctly.
   

Use of sql Partition by clause together with case and count

Wherever you are trying to use aggregate functions in sql server, it will give you error like that a group by clause is necessary. Yes, if you really want to group by, then ok. But what about if you want to see the count of a group but you want to every elements of that group. Group by wont allow you to see other columns that what is specified in the group by clause. But you can. Here is the tips and tricks.

select Class, StudentID, StudentName, count(Class) over (partition by Class)
from StudentTable

The bene fit of partition by is that you can use partition by for generating as many columns as you want and you can specify a different partition criteria for every column.

See below how partition by is use d together with the case statement. Here one single column is generated but it is using two different partition by clause, one to determine the case condition and the other is generating the row number value.
select Class,
case count(Class) over (partition by Class)
when 1 then null
else Row_Number() over (partition by Class order by Class)
end,
StudentID,
StudentName
from StudentTable


The output  will appear like this:

You can find some other useful cases where partition by can be used in the following article.

http://www.programmingsolution.net/sqlserver2005/sqlserver-solutions/partition-by.php

Implement JavaScript HashTable

In JavaScript we don't have any built-in hashtable. But hashtable is a very useful data structure that we often need. Although we don't have hashtable in JavaScript, it is really very simple to implement a hashtable in JavaScript. In this post, we will how to implement a simple hashtable. Definitely we will not use any looping to search the items. Because, in that case the real purpose of hashtable will not be served. In JavaScript, we can use object and object property to implement hashtable.
First of all let us see the basics of the JavaScript object and object property.


Declaring a JavaScript Object:


There are alternate way of creating a javascript object. The simplest is as follows:

var hashTable = {};

This creates a simple javascript object that has no property. We can also create a javascript object using new.

var hashTable = new Object();

Creating a Property of an Object:


We can create a property of an existing object as follows:

hashTable.id = 1;

hashTable.name = 'a hashtable';

Here we have 2 properties. We can also have properties that will be a function.

hashTable.SetItem = function(key, value) {

; //implement hashtable set item here based on key

}

hashTable.GetItem = function(key) {

; //implement hashtable get item by key here

}

Accessing Javascript object property:


It is very simple to understand that we can access a property of a javascript object by simply using .property_name.

hashTable.name

But there is another way of accessing property.

hashTable['name']

hashTable['id']

hashTable['SetItem']('akey', 'aValue');

hashTable['GetItem']('akey'));

The benefit of using this approach this, we can use variable as the index. So we can access properties dynamically based on variable.


Implementing HashTable:


Now we can easily generate hashtable using the above knowledge.

var hashTable = {};

hashTable.SetItem = function(key, value) {

hashTable[key] = value;

}

hashTable.GetItem = function(key) {

return hashTable[key];

}

hashTable.SetItem('aKey', 'aValue');

alert(hashTable.GetItem('aKey'));

Creating a HashTable Class:


Using the above way, we will not be able to use multiple hashtable, if we need. So we can create a javascript hashtable class.

function HashTable() {

var hashTableItems = {};

this.SetItem = function(key, value) {

hashTableItems[key] = value;

}

this.GetItem = function(key) {

return hashTableItems[key];

}

}

We can use the hashtable as follows:

var hashTable = new HashTable();

hashTable.SetItem('aKey', 'aValue');

alert(hashTable.GetItem('aKey'));

var hashTable_new = new HashTable();

hashTable_new.SetItem('anotherKey', 'anotherValue');

alert(hashTable_new.GetItem('anotherKey'));