Javascript variables not working in IE || hiding options with Javascript

Question

This code works just fine in Chrome & Firefox - but fails in IE & Safari.

<script type="text/javascript">
$(document).ready(function() {

alert('1');

<?php foreach($options as $option): ?>
  <?php if($option['option_choice'] == 1): ?>
    var choiceid = <?php echo $option['product_option_id']; ?>;
      <?php foreach ($option['option_value'] as $option_value): ?>
        <?php if($option_value['whatsize'] == 2): ?>
          var choicebigid = <?php echo $option_value['product_option_value_id']; ?>;
        <?php endif; ?>
      <?php endforeach; ?>
  <?php endif; ?>
<?php endforeach; ?>

    alert('2');
    $('#'+choiceid+''+2).hide();
});
</script>

Alert 1 +2 shows in Chrome/FF, but only Alert 1 shows in IE.

---Generated Chrome JS---

<script type="text/javascript">
$(document).ready(function() {
alert('1');
var choiceid = '321'; //Produktvalg ID
var choicebigid = '1111';
$('#'+choiceid+''+2).hide();
document.getElementById(choiceid+''+2).style.display = 'none';
alert(choiceid);
});
</script>

---Generated IE JS---

<script type="text/javascript">
$(document).ready(function() {
alert('1');
var choiceid = '321'; //Produktvalg ID
var choicebigid = '1111';
$('#'+choiceid+''+2).hide();
document.getElementById(choiceid+''+2).style.display = 'none';
alert(choiceid);
});
</script>

---Update---

Adding single quotes seemed to help generating the IE JS code - before it was empty. This also added the style="display:none;" New problem is that hiding an option is not supported in IE and Safari. Will disable the option along hiding it as well.

---Status--- Fixed. End problem seemed to be hiding and

Your loop repeatedly sets the same variable to different values. Why do you do this in a loop? — Barmar, Dec 06 '13 at 12:19
No browser console errors in Chrome/Firebug or IE/Develepor Tool — user3074352, Dec 06 '13 at 12:39

score 0 · Accepted Answer · answered Dec 06 '13 at 12:19

0

Try with single quote

var choiceid = '<?php echo $option['product_option_id']; ?>';

var choicebigid = '<?php echo $option_value['product_option_value_id']; ?>'

answered Dec 06 '13 at 12:19

kwelsan

1,229
1
7
18

In the loop there is only one variable $option['option_choice'] which contains the value of "1". – user3074352 Dec 06 '13 at 12:30
This fixed the problem with generating the code - now the problem is JS not hiding the element in IE. – user3074352 Dec 06 '13 at 12:38
check in html, do you have element with id="3212" and don't use .hide and display none together.. only hide is sufficient.. – kwelsan Dec 06 '13 at 12:40
yes, the ID exists. The element is now with a style. New problem is that I did not know that hiding an select option is not supported in IE and Safari. Will try to disable the element/option aswell. – user3074352 Dec 06 '13 at 12:50
Note that ID's in HTML must begin with a letter ([A-Z,a-z]). See also [here](http://stackoverflow.com/a/79022/474535) – bart s Dec 06 '13 at 12:51

Javascript variables not working in IE || hiding options with Javascript

1 Answers1