Alex's Rocket » Javascript

Bug with Broken Ordered list in IE9

klalex — Sat, 11 Jun 2011 12:19:31 +0000

Recently I’ve been working with ordered lists. And found strange behavior in IE9 when one ordered list is hiding and new one is showing – instead of usual order 1,2,3.. it showed all zeros. And it actually doesn’t matter what list style type you choose – decimal, lower alpha or other.

Let me show you an example in case you do not have the same problem as well on your project:

<html>

<head>

<script type="text/javascript">

window.onload = function() {

        document.getElementById(‘lnk-one’).onclick = function() {

                document.getElementById(‘two’).style.display = ‘none’;

                document.getElementById(‘one’).style.display = ‘block’;

        };

        document.getElementById(‘lnk-two’).onclick = function() {

                document.getElementById(‘one’).style.display = ‘none’;

                document.getElementById(‘two’).style.display = ‘block’;

        };

}

</script>

</head>

<body>

<a href="#" id="lnk-one">One</a> <a href="#" id="lnk-two">Two</a>

<div id="one">

        <ol>

                <li>one</li>

                <li>two</li>

        </ol>

</div>

<div id="two" style="display:none">

        <ol>

                <li>three</li>

                <li>four</li>

        </ol>

</div>

</body>

</html>

If you open this HTML in IE9 and then click at first on “Two” link and then “One” you will see the issue:

Looks like order breaks in IE9 when one order is hidding then appears new one and then previous one is showing again. To quickly fix you need to place empty element say

in the end of the body and when you show ordered list just assing space to this element inner html. Here you are previous html page fixed:

<html>

<head>

<script type="text/javascript">

window.onload = function() {

        document.getElementById(‘lnk-one’).onclick = function() {

                document.getElementById(‘two’).style.display = ‘none’;

                document.getElementById(‘one’).style.display = ‘block’;

                document.getElementById(‘empty’).innerHTML = ‘ ‘;

        };

        document.getElementById(‘lnk-two’).onclick = function() {

                document.getElementById(‘one’).style.display = ‘none’;

                document.getElementById(‘two’).style.display = ‘block’;

                document.getElementById(‘empty’).innerHTML = ‘ ‘;

        };

}

</script>

</head>

<body>

<a href="#" id="lnk-one">One</a> <a href="#" id="lnk-two">Two</a>

<div id="one">

        <ol>

                <li>one</li>

                <li>two</li>

        </ol>

</div>

<div id="two" style="display:none">

        <ol>

                <li>three</li>

                <li>four</li>

        </ol>

</div>

<div id="empty"></div>

</body>

</html>

It’s important to place empty

after ordered lists. If you place it before – it won’t work.

The array declaration difference between Firefox and IE JavaScript interpreter

klalex — Fri, 21 May 2010 12:18:02 +0000

Found interesting difference in array declaration between FF and IE. For example, if leave comma (,) after all elements in array there will be different size of array as a result:

var arr = [1,2,3,];

document.write(arr.length);

As a result in Firefox and Safari it will write “3″ but in IE it will be “4″.

Using arrays in form element names

klalex — Mon, 27 Jul 2009 13:08:35 +0000

Sometimes there is variable number of similar elements on a form. For example, phone numbers. To iterate all filled values on the server it will be nice to use arrays. And form element naming allow it:

<form method="post">

<input type="text" name="phone[0]" />

<input type="text" name="phone[1]" />

…

</form>

Using PHP it’s easy to iterate through those values now:

foreach ($_POST[‘phone’] as phone) {

// do something with phone, save in the database

}

But how to access those values with JavaScript? In case we need to validate required fields, for example. It’s easy to suppose that document.forms[0].phone[0].value returns value. Actually no. In this case we need to use document.forms[0].elements array and access by key:

alert(document.forms[0].elements["phone[0]"].value);

Using arrays in form element naming allows us to control the variable number of form elements. For example, we can add link “Add another phone” and when user clicks on it add new field. And we do not need to change anything in PHP code because it will iterate all values that we have passed to the server.