Combo box works in IE but appears blank in FF

[TomasART]

In IE the combobox apears with data, but in FF the combobox apears blank. Why?

<script language="JavaScript" type="text/javascript"> 
 
function addOpt(oCntrl, iPos, sTxt, sVal){
 
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}
 
function cambia(oCntrl,valor){
 
while (oCntrl.length) oCntrl.remove(0);
{
 
var selObj = document.getElementById('ta');
var selIndex = selObj.selectedIndex;
var esta = selObj.options[selIndex].text
var txtTextObj = document.getElementById('txtText');
txtTextObj.value = selObj.options[selIndex].text;
 
if (valor ==0)
{
addOpt(oCntrl, 0, "AGOTADO.............................", "0"); 
}
else if (valor >=5)
{
addOpt(oCntrl, 0, "Seleccione la Cantidad..........", "0"); 
addOpt(oCntrl, 1, "1", "1");
addOpt(oCntrl, 2, "2", "2"); 
addOpt(oCntrl, 3, "3", "3");
addOpt(oCntrl, 4, "4", "4"); 
addOpt(oCntrl, 5, "5", "5"); 
}
else
{
addOpt(oCntrl, 0, "Seleccione la Cantidad..........", "0");
var i=1;
while (valor !=0) {
 
addOpt(oCntrl, i, i, i); 
i = i + 1;
valor = valor - 1;
} 
}
 
}
 
}
</script>
 

[pbmods]

Heya, TomasART. Welcome to TSDN!

     eval(oCntrl.options[iPos]=selOpcion);
 

Why do you eval this statement?

[TomasART]

Thanks.

This function add the combo data.

[TomasART]

PLease anyone can help me to change this line of code:

eval(oCntrl.options[iPos]=selOpcion);

[TomasART]

This don't work in FF. How i can make it compatible?

eval(oCntrl.options[iPos]=selOpcion);

[acoder]

Threads merged - please keep the same problem in one thread.

PS. changed title too.

[acoder]

See how you can add and remove options in this tutorial.

[pbmods]

Thanks.

This function add the combo data.

Yes, but why is it being eval'ed? Won't it work just as well if you remove the eval statement?

[TomasART]

No it don't work if i remove the eval statement.

[acoder]

Show an example of the 'cambia' function being called.

[ronnil]

why not make use of DOM? This function is a bit more complex, but should work in all the major browsers.

function addOption(ctr,val,txt,index)
{
    var newOpt = document.createElement('option');
    newOpt.value = val;
    newOpt.text = txt;
 
    if(index == undefined)
        index = null;
/**
IE doesn't seem to be able to cope with the last parameter so i put a catch statement in and call it only with the newOpt argument
*/
    try{
        ctr.add(newOpt,index);
    } catch(e) {
        try{
            ctr.add(newOpt);
            } catch(e) {
                alert('You have a sucky browser, please visit http://www.mozilla.org to get a proper one');
            }
    }
}

[TomasART]

why not make use of DOM? This function is a bit more complex, but should work in all the major browsers.

function addOption(ctr,val,txt,index)
{
    var newOpt = document.createElement('option');
    newOpt.value = val;
    newOpt.text = txt;
 
    if(index == undefined)
        index = null;
/**
IE doesn't seem to be able to cope with the last parameter so i put a catch statement in and call it only with the newOpt argument
*/
    try{
        ctr.add(newOpt,index);
    } catch(e) {
        try{
            ctr.add(newOpt);
            } catch(e) {
                alert('You have a sucky browser, please visit http://www.mozilla.org to get a proper one');
            }
    }
}

Thanks, but this do the same like my function. In FF dont'work. See above i will post my code another time with the call function.

[ronnil]

Odd. I use similar code to produce same result.

Does FF produce any errors? (Tools > Error Console)

[TomasART]

Result:

Internet Explorer:

FireFox:

CODE of the first COMBO (how i call the function).

$combo = "<select name=\"ta\" class=\"imputbportada\" onChange=\"cambia(document.formComprar.Q1,this.val ue)\">\n";
$i=1;
//insertamos el titulo
$combo .= " <option value='" .$i. "'>Seleccione su talla.................</option>\n";
$artalla[$i]=$row_tallas['size'];

$i=2;
//Insertamos la primer talla
$combo .= " <option value='".$stock_actual;
$combo .= "'>".$row_tallas['size']."</option>\n";
$artalla[$i]=$row_tallas['size'];

//Insertamos el resto de tallas
while($row_tallas = mysql_fetch_array($result_tallas))
{
$query_carrito = "SELECT sum(products_quantity) as total FROM user_basket WHERE products_id='".$id."' AND products_size='".$row_tallas['size']."'";
$result_carrito = mysql_query($query_carrito, $this->link) or $this->_Error(mysql_error(), 'ERROR | DB_ERROR');
$row_carrito = mysql_fetch_array($result_carrito);
$stock_actual=$row_tallas['stock_actual']-$row_carrito['total'];

$i=$i+1;
$combo .= " <option value='".$stock_actual;
$combo .= "'>".$row_tallas['size']."</option>\n";
$artalla[$i]=$row_tallas['size'];

}


$oleole=1;

$combo .= "</select>\n";
echo $combo ;



CODE that ADD the data to the second combo:

<script language="JavaScript" type="text/javascript">

function addOpt(oCntrl, iPos, sTxt, sVal){

var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);




}

function cambia(oCntrl,valor){

while (oCntrl.length) oCntrl.remove(0);
{

var selObj = document.getElementById('ta');
var selIndex = selObj.selectedIndex;
var esta = selObj.options[selIndex].text
var txtTextObj = document.getElementById('txtText');
txtTextObj.value = selObj.options[selIndex].text;

if (valor ==0)
{
addOpt(oCntrl, 0, "AGOTADO.............................", "0");
}
else if (valor >=5)
{
addOpt(oCntrl, 0, "Seleccione la Cantidad..........", "0");
addOpt(oCntrl, 1, "1", "1");
addOpt(oCntrl, 2, "2", "2");
addOpt(oCntrl, 3, "3", "3");
addOpt(oCntrl, 4, "4", "4");
addOpt(oCntrl, 5, "5", "5");
}
else
{
addOpt(oCntrl, 0, "Seleccione la Cantidad..........", "0");
var i=1;
while (valor !=0) {

addOpt(oCntrl, i, i, i);
i = i + 1;
valor = valor - 1;
}
}

}

}
</script>

[acoder]

Change the eval statement with the try...catch statement posted by ronnil, i.e. use the add method. Since IE uses a non-standard (as ever), you need the try/catch for it to work cross-browser. See the link I posted earlier which also explains this.

[TomasART]

Change the eval statement with the try...catch statement posted by ronnil, i.e. use the add method. Since IE uses a non-standard (as ever), you need the try/catch for it to work cross-browser. See the link I posted earlier which also explains this.

I have changed my funtion to this. RESULT: works fine in IE but not in Firefox. I don't understand it it's so dificult?

function addOpt(oCntrl,iPos,sTxt,sVal)

{

var newOpt = document.createElement('option');
newOpt.value = iPos;
newOpt.text = sTxt;

if(sVal == undefined)
sVal = null;
try{

oCntrl.add(newOpt,sVal);

} catch(e) {

try{

oCntrl.add(newOpt);

} catch(e) {

alert('You have a sucky browser, please visit http://www.mozilla.org to get a proper one');

}

}

}

[acoder]

I think you'll need to swap the iPos and sVal around. BTW, you don't need the 'sucky' alert!

[TomasART]

I think you'll need to swap the iPos and sVal around. BTW, you don't need the 'sucky' alert!

i don't undestand what you mean with swap the ipos and sval.

????

[acoder]

i don't undestand what you mean with swap the ipos and sval.

????

iPos is a number and sVal is a string. You're using them in the wrong places, e.g. the second argument of the add method expects a number, but you're giving it a string (sVal instead of iPos).

[TomasART]

iPos is a number and sVal is a string. You're using them in the wrong places, e.g. the second argument of the add method expects a number, but you're giving it a string (sVal instead of iPos).

Nothing, do the same, work in IE but NOT in FF.

Please help.

[TomasART]

Please i will make paypal donation who resolve the problem

[acoder]

Have you tried this?

 function addOpt(oCntrl,iPos,sTxt,sVal) {
          var newOpt = document.createElement('option');
          newOpt.value = sVal;
          newOpt.text = sTxt;
 
          if(iPos == undefined)
              iPos = null;
          try{
              oCntrl.add(newOpt,iPos);
          } catch(e) {
              try{
                  oCntrl.add(newOpt);
                  } catch(e) {
                      alert('Didn\'t work');
                  }
          }
      }

[TomasART]

mmm i thing the error was in another place.

The error console of FF say "selObj has no properties"

When i clic the error it take me to the folowing line in the "cambia" function.


var selIndex = selObj.selectedIndex;

[Plater]

Change the eval statement with the try...catch statement posted by ronnil, i.e. use the add method. Since IE uses a non-standard (as ever), you need the try/catch for it to work cross-browser. See the link I posted earlier which also explains this.

Don't make me even start with how bad FF is at maintaining standars. (You'd think they never even heard of w3.org)

[acoder]

Don't make me even start with how bad FF is at maintaining standars. (You'd think they never even heard of w3.org)

Er, surely you mean IE?!

[acoder]

mmm i thing the error was in another place.

The error console of FF say "selObj has no properties"

When i clic the error it take me to the folowing line in the "cambia" function.


var selIndex = selObj.selectedIndex;

Hah, no wonder. All that time, you're trying to access an element with an id of 'ta', but there is no element with an id of 'ta'! No, "name" does not equal "id" (except for IE!). If you add an id, then that error should go.

[karenRoss]

Er, surely you mean IE?!

i concur...surely you mean IE?!?!

[Plater]

i concur...surely you mean IE?!?!

Nope I ment what I said.
I just moved to firefox 2.0 (which told me "we don't do java anymore, sorry" which i thought was "funny") so maybe they have actually implemented some of the css standards. What are they on like 3? 4? firefox seemed to be stuck at 1.

[drhowarddrfine]

Plater,
The two most standards compliant browsers in the world are Firefox and Opera. They both run rings around IE which is nine years behind the W3C in standards compliance. If it doesn't work in Firefox then something is wrong with the code.

If you need help in determining where browsers stand with standards compliance, this link and this link serve me well and you probably need to spend a lot of time there.

If you are thinking IE does better with compliance, please visit the IEBlog site where lead developer, Chris Wilson, apologizes for IEs feable effort.

[Plater]

I generally try to use w3.org, since they ARE the standards people and not some 3rd party knock off site.

[drhowarddrfine]

Yes, but they don't show which browsers comply with the standard. Firefox is, by far, the most standards compliant browser, along with Opera. They are the only browsers you should initially test ANY markup and code in. Once it is working in these modern browsers, then you can adjust for IEs quirks and bugs. Generally, any code that works in Firefox will run anywhere, but you have NO assurances that code written for IE will run anywhere else.

btw, that link is hardly a 'knockoff site'. That implies they copy; he doesn't.

[TomasART]

Hah, no wonder. All that time, you're trying to access an element with an id of 'ta', but there is no element with an id of 'ta'! No, "name" does not equal "id" (except for IE!). If you add an id, then that error should go.

GREAT!!! There was the problem. Yeaaaaaaaaaaahhhhhh hahahahahaha jojojojjojo jujjujjujujjuju

Thanks.

[acoder]

GREAT!!! There was the problem. Yeaaaaaaaaaaahhhhhh hahahahahaha jojojojjojo jujjujjujujjuju

Thanks.

Yes, good job you finally got it. IE was at fault here.

[acoder]

Don't make me even start with how bad FF is at maintaining standars. (You'd think they never even heard of w3.org)

For one thing, we have to code separately for IE.

Secondly, this problem was caused by IE. If you type document.getElementById(id), how on earth is that supposed to work with 'name' when there's no id. Completely non-standard.