Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Select list doesn't render or freezes when using onchange in IE10

Posted on 2013-05-23
7
1,153 Views
Last Modified: 2013-08-31
I've got the following HTML in an IE10 browser (below)

When clicking in the upper left <select> to trigger its "onchange", I expect the upper right select list to change its second row of text, using JavaScript.

However, this does not work OK.  
With my first click, the onchange function executes correctly, but the upper right select does not re-render at all. Nothing happens.
Succeeding clicks does change the upper right select list, but the rendering seems to be "one click behind". Subsequently moving the mouse over the second select field seems to trigger its rendering.

The lower <select> is even worse. Its onchange function is supposed to change the content of a row in the very same select list, itself.
When clicking to trigger the event, the select list "freezes" and becomes completely unresponsive, until I've moved focus to any other field (i.e. the upper select lists) and starts all over again.

In IE9 (and other browsers like Chrome, Firefox, IE8 etc) all works OK, just as expected.
But IE10 executes really annoyingly!

Any ideas?
Right now I'm testing with IE10 version 10.0.9200.16576
Does anybody get the above behaviour with other IE10 versions?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script>
function SetList(field) {
  var now = new Date();
  field.options[1].text = 'set '+now.getTime();
}
</script>
</head>
<body>
<form name=TheForm>
Test 1 (set next field):
<select size=3 onChange="SetList(document.TheForm.Test1)">
  <option selected>First row
  <option>Click to set value in list to the right
  <option>Third row
</select>
<select size=3 name=Test1>
  <option selected>Choice 1
  <option>Choice 2
  <option>Choice 3
</select>
<br><br>
Test 2 (set itself):
<select name=Test2 size=3 onChange="SetList(document.TheForm.Test2)">
  <option selected>First row
  <option>Click to set value in same list
  <option>Third row
</select>
</body>
</html>

Open in new window

0
Comment
Question by:stefanlennerbrant
  • 4
  • 2
7 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39190784
I have fetch same problem somewhere but I forgot what i did exactly I think it was solved using  addEventListener.
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39190804
Again I want to refer you to microsoft :
http://support.microsoft.com/kb/319741
0
 

Author Comment

by:stefanlennerbrant
ID: 39191633
The MS KB link seems to refer to a bug in IE6, specifically relating to a "frameset situation"
Just for the sake of it, I tested by using addeventlistener to set all the event handlers to the select fields, but the problem was the same.

Anyhow, isn't there anyone that can actually repeat the issue using my HTML code above on an IE10 browser - resulting in "delayed rendering" of the upper select lists and freezing the lower select list?
Is there anybody that can make the page "work" correctly, just as it does in IE9 and other browsers?
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 44

Assisted Solution

by:Rainer Jeschor
Rainer Jeschor earned 500 total points
ID: 39192179
Hi,
the final solution has been to add a
field.blur(); in the function.
As I ran a W3C validation I just modified the rest of the page as well, but here we go:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function SetList(field) {
  var now = new Date();
  field.options[1].text = 'set '+now.getTime();
  field.blur();
}
</script>
</head>
<body>
<form name="TheForm" action="#">
Test 1 (set next field):sss
<select size=3 onchange="SetList(document.TheForm.Test1)">
  <option selected>First row</option>
  <option>Click to set value in list to the right</option>
  <option>Third row</option>
</select>
<select size=3 name="Test1" id="Test1">
  <option selected>Choice 1</option>
  <option>Choice 2</option>
  <option>Choice 3</option>
</select>
<br><br>
Test 2 (set itself):
<select id="Test2" name="Test2" size=3 onchange="SetList(this);">
  <option selected>First row</option>
  <option>Click to set value in same list</option>
  <option>Third row</option>
</select>
</form>
</body>
</html>
                                  

Open in new window

0
 

Author Comment

by:stefanlennerbrant
ID: 39194029
Thanks, RainerJPos, adding blur() seems to be a step in the right direction.
It still doesn't seem to solve the case with the two upper select lists  (where IE10 does "delayed rendering") but it does avoid the freezing of the lower select list.

Instead adding focus() to explicitly set focus to another field, seems to solve the issue completely.

I will experiment more with this, but blur/focus really seems to be the fix here, for IE10.
I'll report back after more testing.

Does anybody know about this IE10 problem? Is it a known bug? I haven't found much on the internet...
0
 

Accepted Solution

by:
stefanlennerbrant earned 0 total points
ID: 39439067
Eventuelly I was able to work around the issue
I had to make sure that there was no "border" style on the field - I implemented that by setting
  field.style.border = '';
  field.className = '';
every time I changed the content of a select list.
This fixes the freezing behaviour.

It is also to some extent coupled with focus - I also had to blur the field that was in focus, and then (after a timeout of a few ms) reset focus to it again.
This fixes the "delayed rendering" behaviour.


All this however ONLY refers to multiple-row select lists, and only affects IE10.

Thus, problem solved, to the cost of not having my own choice of border on the select list field in IE10, and leaving me with a MSIE feeling of "duh"

Nobody else has experienced this?

Feel free to try to repeat the problem, I use the attached code snippet on IE10
Remove comments as noted, to workaround the problem

Note that all is good, all the time, in non-IE10 browsers.

/Stefan
EEselectIE10.htm
0
 

Author Closing Comment

by:stefanlennerbrant
ID: 39454693
Using blur and re-focus is half the solution.
Removing border from style is half the solution

Oh My, what should one without IE?
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
.htaccess css/images no longer loading 4 38
jQuery force form POST 7 48
How to create a table with buttons 3 22
Opening a new tab in IE using Powershell / HTML 2 21
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question