help Needed to sort a drop Down box using new Option method

[Rahul]

Hello ,

I have a JS sorting issue with a drop down . Scenario is that data is
coming in a sorted way through ajax , this data is then populated
using new option method
Now when the data is been rendered to the HTML page it is not in
sorted form . pls refer to the code below:

function ___populate_states(str, element)
{
eval(str);
alert(element);
//prints
states_array = new Array();
states_array['2'] = 'Delhi';
states_array['5'] = 'Karnataka';
states_array['3'] = 'Maharashtra';
states_array['4'] = 'Uttar Pradesh';

//


for (index = 1; index < element.options.length; index = index + 1)
{
element.options[index] = null;
}

element.options.length = 1;

var index = 1;

if (typeof(states_array) != 'undefined')
{
for (key in states_array)
{
element.options[index++] = new Option(states_array[key], key);
}

}
}

Please help.

 

[Thomas 'PointedEars' Lahn]

I have a JS sorting issue with a drop down . Scenario is that data is
coming in a sorted way through ajax , this data is then populated
using new option method
Now when the data is been rendered to the HTML page it is not in
sorted form . pls refer to the code below:

function ___populate_states(str, element)
{
eval(str);

I don't think you really want to do that. Try to pass a Function object
reference, and to call the function here, instead.

alert(element);
window.alert(element);

//prints
states_array = new Array();

`states_array' appears to be undeclared and so leaks into the outer scopes
which can be fatal if there is an element of the same name or ID.

states_array['2'] = 'Delhi';
states_array['5'] = 'Karnataka';
states_array['3'] = 'Maharashtra';
states_array['4'] = 'Uttar Pradesh';

Although all property names are stored as strings indeed,

states[2]

aso. suffices. However the following is more efficient (although not
necessarily better understandable):

var states_array = [,, 'Delhi', 'Maharashtra', 'Uttar Pradesh', 'Karnataka'];

//


for (index = 1; index < element.options.length; index = index + 1)

`index' should be declared here. And you should be consistent about your
operations: index++ (as below)

{
element.options[index] = null;
}

element.options.length = 1;

As the property is specified to be read-only, you might want to check for
exceptions here. If you do, be sure to eval("...") the try..catch so as to
hide it from non-compliant script engines for the time being.

You should also reverse the order of approaches to clear the `select'.
(First assign to .length, and only iterate if that did not have the desired
effect.)

var index = 1;

The declaration should replace the initialization part of the `for'
statement. The assignment can stay here, although one loop would suffice
(you can replace items on the fly and delete extra items afterwards).

if (typeof(states_array) != 'undefined')

`typeof' is an operator, not a function/method. Although the above is
syntactically correct, I recommend you write

if (typeof states_array != "undefined)

so that it is clear that nothing is called here.

However, if you declare `states_array' a (local) variable as you SHOULD, you
can lose this test.

{
for (key in states_array)
{
element.options[index++] = new
Option(states_array[key], key);
}

(You should use spaces for indentation, not tabs. At least not when posting
because default tab width differs among NUAs/MUAs and cannot always be defined.)

The order of for-in iteration is specified to be unspecified. Just don't
use it if order is relevant. Use instead:

for (var key = 0, a = states_array, len = a && a.length; key < len; key++)
{

I would prefer `i' over `key', though. It isn't a "key" anyway, it is a
numeric property name that is handled specially because the owner is an
Array object.

See the ECMAScript Language Specification, Edition 3 Final, sections 12.6.4
and 15.4.

BTW, with few exceptions (not here), in English a punctuation mark is not
preceded by whitespace. You should also refrain from using abbreviations
such as "pls" here; that looks especially weird if you are not a speaker
of English as native language -- I can tell.


HTH

PointedEars

 

[Rahul]

I have a JS sorting issue with a drop down . Scenario is that data is
coming in a sorted way through ajax , this data is then populated
using new option method
Now when the data is been rendered to the HTML page it is not in
sorted form . pls refer to the code below:

function ___populate_states(str, element)
{
   eval(str);

I don't think you really want to do that.  Try to pass a Function object
reference, and to call the function here, instead.

   alert(element);

  window.alert(element);

       //prints
states_array = new Array();

`states_array' appears to be undeclared and so leaks into the outer scopes
which can be fatal if there is an element of the same name or ID.

states_array['2'] = 'Delhi';
states_array['5'] = 'Karnataka';
states_array['3'] = 'Maharashtra';
states_array['4'] = 'Uttar Pradesh';

Although all property names are stored as strings indeed,

  states[2]

aso. suffices.  However the following is more efficient (although not
necessarily better understandable):

  var states_array = [,, 'Delhi', 'Maharashtra', 'Uttar Pradesh', 'Karnataka'];

//

   for (index = 1; index < element.options.length; index = index + 1)

`index' should be declared here.  And you should be consistent about your
operations: index++ (as below)

   {
           element.options[index] = null;
   }

   element.options.length = 1;

As the property is specified to be read-only, you might want to check for
exceptions here.  If you do, be sure to eval("...") the try..catch so as to
hide it from non-compliant script engines for the time being.

You should also reverse the order of approaches to clear the `select'.
(First assign to .length, and only iterate if that did not have the desired
effect.)

   var index = 1;

The declaration should replace the initialization part of the `for'
statement.  The assignment can stay here, although one loop would suffice
(you can replace items on the fly and delete extra items afterwards).

   if (typeof(states_array) != 'undefined')

`typeof' is an operator, not a function/method.  Although the above is
syntactically correct, I recommend you write

  if (typeof states_array != "undefined)

so that it is clear that nothing is called here.

However, if you declare `states_array' a (local) variable as you SHOULD, you
can lose this test.

   {
           for (key in states_array)
           {
                   element.options[index++] = new
Option(states_array[key], key);
           }

(You should use spaces for indentation, not tabs.  At least not when posting
because default tab width differs among NUAs/MUAs and cannot always be defined.)

The order of for-in iteration is specified to be unspecified.  Just don't
use it if order is relevant.  Use instead:

  for (var key = 0, a = states_array, len = a && a.length; key < len; key++)
  {

I would prefer `i' over `key', though.  It isn't a "key" anyway, it is a
numeric property name that is handled specially because the owner is an
Array object.

See the ECMAScript Language Specification, Edition 3 Final, sections 12.6..4
and 15.4.

BTW, with few exceptions (not here), in English a punctuation mark is not
preceded by whitespace.  You should also refrain from using abbreviations
such as "pls" here; that looks especially weird if you are not a speaker
of English as native language -- I can tell.

HTH

PointedEars

Thanks HTH for your reply as well as for English suggestions.
The piece of code that I have pasted above is working as expected in
IE but I have issues with Mozilla .
Any way try to provide me a quick fix if you can .

Rahul

 

[Thomas 'PointedEars' Lahn]

[Full qoute]

Thanks HTH for your reply as well as for English suggestions.

If only you took heed of them.

The piece of code that I have pasted above is working as expected in
IE but I have issues with Mozilla .

The issue you are facing has nothing to do with IE vs. Mozilla, more with
JScript vs. JavaScript, however nothing to rely on. I told you what the
real reason is.

Any way try to provide me a quick fix if you can .

I did. Learn to quote, then you will recognize it.

<http://jibbering.com/faq/#posting>


PointedEars