[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Hanging IE11 when changing "self" select field in onChange event handler

Posted on 2014-03-04
13
Medium Priority
?
2,687 Views
Last Modified: 2014-05-25
Can somebody repeat this behaviour, with the code below?
When changing selection in the select list, using the mouse, the event handler modifies the content of one of the select options.

This "hangs" IE11 such that it is not possible to click any more, to change selection. The select field completely "freezes".
It only happens with "multiple row" select fields (like size=3)

Using the keyboard to change selection however works OK.
And of course it works ok in other browsers :-)

So 1) can anybody repeat this in IE11?
and 2) can anybody think of an explanation of the behaviour, or any workaround?

<!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 (set itself):
<select name=Test size=3 onChange="SetList(document.TheForm.Test)">
  <option selected>First row
  <option>Click to set value in the list
  <option>Third row
</select>
</form>
</body>
</html>

Open in new window


Thanks
0
Comment
Question by:Stefan Lennerbrant
[X]
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
13 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 39905272
first thing you need to do it always close your html values in single or double quotes, otherwise it is invalid markup, and could cause browsers to act not as expected. You are also using now as a variable, and it is a javascript keyword, so you'll want to use another variable name.

Second, in your javascript function, you need to match up either the text attribute or value attribute, and it looks like you're trying to match up a unique date time stamp, thats why it isnt working.

if you want to add a new option, you could do something like this:

<script>
function SetList(field) {
    var strNow = new Date();
   
    var option = document.createElement("option");
    option.text = 'set '+strNow.getTime();
    field.add(option);
}
</script>

Open in new window


with all that said, what exactly are you trying to accomplish?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39905371
Work for me : http://jsfiddle.net/Yw8ur/

<!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].innerHTML = 'set '+now.getTime();
		}
	</script>
</head>
<body>
	<form name=TheForm>
		Test (set itself):
		<select name="Test" size="3" onChange="SetList(this)">
			<option selected='selected'>First row</option>
			<option>Click to set value in the list</option>
			<option>Third row</option>
		</select>
	</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:Stefan Lennerbrant
ID: 39906252
@BigMonty, thanks for your input.

Well yes, my submission is an extremely simplified sample to show the problem in as few lines of html code as possible.
The use of timestamps etc, is just to make it really easy to see, on the screen, that the option text is actually updated.

In the "real world", we are modifying the contents of one select field (both value and text of the option[]), based on changes in another select field.
As the very same type of hanging/freezing happens when working with one single select field, I choose to use this one-select-field version to show the problem to the EE community.

Your input is intresting, but maybe a little bit beside the point.
You're of course right in "quoting attributes" and "not using now", but I do not think(?) these issues affect the problem at hand.

I do not really want to add options to the list, but instead to modify an existing option.
But I'll look into your suggestion of creating a standalone option element, and then replace the existing option element in the select list.

However, it really should (right?) work with modifying the option with field.options[1].text='xxx' (and corresponding .value='xxx')
Shouldn't it? It works ok in all non-IE browsers, and in older IE version (however IE10 has some problems as well, that however can be handled with workarounds)

So for one thing I just want to solve the issue at hand. And I'll check your suggestion!
On the other hand, I'd like to know what the xyz! is going on with IE11 - why does it not work with the "plain vanilla method" that I use?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Stefan Lennerbrant
ID: 39906293
@leakim971, this was promising

By changing to set option[].innerHTML instead of setting option[].text, it works OK in IE11
I also need to set option[].value (not included in my simple sample) but that has never been a problem - its updating option[].text that freezes IE11.

This may very well be the soluton! Thanks.

However, I cannot avoid thinking that setting innerHTML seems to be quite "hacky" compared to setting text.
As this hopefully works on all browsers (I'll check) I'll change the entire system to start using innerHTML instead. But sheesh, all this trouble just to make IE11 happy?

What do you think/guess; is this a bug in IE11 or am I doing something odd/forbidden by updating the option[].text like this?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39906378
A lot of variations on a theme - I would personally never use .add or .innerHTML

I do not see any problems with quotes, variable names or the usage of text

Can you post the actual non-working code in a jsfiddle.net

I have a suspicion there is more going on. For example the doctype is ancient

Here is how I would have coded it using your example avoiding form names and field names completely

can you test it in IE11? http://jsfiddle.net/mplungjan/JKSRY/show

I do see an issue in IE10, that I need to click away to see the update if I click on option[1] - that suggests to me that it is the onchange handler and multiple that might be an issue

<!DOCTYPE html>
<html>
<head>
<script>
function SetList(sel) {
  var now = new Date();
  sel.options[1].text = 'set '+now.getTime();
}
</script>
</head>
<body>
<form>
Test (set itself):
<select name="Test" size=3 onChange="SetList(this)">
  <option selected>First row
  <option>Click to set value in the list
  <option>Third row
</select>
</form>
</body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39906414
So running this again, I see in IE10 that it is not freezing, it just does not update until you click outside the sel. This only happens when you click the options[1] itself.

It seems to be how IE works with onchange and nothing more.

A simple workaround would be to make the select a set of radio boxes or use the click event

This works (note I gave the sel an ID)

http://jsfiddle.net/mplungjan/xd4Y2/show/

window.onload=function() { 
  var sel = document.getElementById("Test");
  sel.onclick=function() {
    var now = new Date();
    this.options[1].text = 'set '+now.getTime();
  }      
}

Open in new window

0
 

Author Comment

by:Stefan Lennerbrant
ID: 39906449
@mplungjan, the freeze in IE11 happens with the exact 21 rows of html used in my initial submission of this case. Please test, if possible.

FYI, the same freeze in IE11 happens when using your exact html (using html5 doctype etc)

Yes, there are some problems with IE10 as well. And more so when using two select fields that "modify eachother" (I use this simple one-single-select-field to simplify the question)

However, that IE10 bug can be fixed with a workaround where I loose focus on the field initiating the change, using blur(), and then re-sets focus to the field again using a setTimeout() with 1 millisecond delay. Not very beautiful but OK (I detect IE10 and do that voodo magic only then)

So yes, IE10 is "broken" as well, but IE11 is even worse. With IE11 it does not help with the blur+focus method that fixed the bug(?) in IE10

So right now the innerHTML method is maybe one possible way to go...
But I'm not happy :-)
And I'm still very curious :-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39906524
0
 

Author Comment

by:Stefan Lennerbrant
ID: 39908670
@mplungjan, the reason that your suggestion works, is that you use onClick instead of onChange

With onClick, all configuration work OK - it's only when using onChange that IE11 freezes
Of course, with onClick the handler is not triggered when selecting choices with the keyboard, so that's a method that is not possible to use.

A similar freeze happens with IE10, but there it can be handled by "clicking on the document background" (i.e. loosing focus on the field) - just as somebody commented above.
Then IE seems to "release the freeze" such that it's possible to click once again in the field (and then one needs to loose focus again, etc).
However, that situation can be handled programatically (blur:ing and focus:ing in the onChange event handler), so for IE10 there is a workaround to "fix" the bug.

In IE11 it's actually possible to "release the freeze" as well, but one then MUST use the keyboard to "tab away" from the select field, and then back again.
Clicking the mouse to loose focus is not enough. Thus, the blur+focus JavaScript workaround is not a solution for IE11, as it is for IE10.

Do note, also, that using they keyboard to trigger onChange always works. It's only the combination mouse-click + onChange that makes IE10 and IE11 freeze - and for IE11 I've got no workaround, yet :-(

Right now, the ONLY method to handle this, as discussed in this thread, seems to be to use innerHTML to change the <option> "text" content. This might be the way to do it, but it's quite hacky...
(also there are many bug reports on IE, warning for using innerHTML on select elements, but maybe that's all old news that is fixed in recent IE versions...)

Thankful for any further input...
0
 

Author Comment

by:Stefan Lennerbrant
ID: 39908673
...update/correction to my most recent comment:

In IE10 there is not a freeze in this particular one-single-select-field example, but the list does not refresh/update with the new value. In a two-select-fields-case there is a freeze in IE10 as well.

The key fact here is, however, that there are "problems" with IE10 (refresh and/or freeze) that can be handled, with Javascript, by blur:ing and re-focus:ing the field.
With IE11 it's a freeze problem in all situations, and it cannot be handled with blur+focus.
0
 

Author Comment

by:Stefan Lennerbrant
ID: 39908683
Yet another update...

I happened to stumble over an IE11 build 16384 on Windows 8
There everything works ok, in all situations.
Either the old 16384 isn't buggy, or the Windows8 environment itself makes it work

On Windows 7 with IE11 build 16518, it doesn't work, anyhow. I also tested Win7 with IE11 build 16428, which has the same bug.
And that's of course the great problem...
0
 

Accepted Solution

by:
Stefan Lennerbrant earned 0 total points
ID: 39908873
FYI, I have tested (in the real application) to change all my eventhandler code looking like:
  field.options[idx].text = 'a text';
  field.options[idx].value = 'a value';

...to instead use:
  change_select_option(field, idx, 'a text', 'a value');

...and then defining:
function change_select_option(field, idx, text, value) {
    if(field.size > 1) {
      text = String(text)
                         .replace(/&/g, '&amp;')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(/"/g, '&quot;')
                         .replace(/\xa0/g, '&nbsp;');
      field.options[idx].innerHTML = text;
    }
    else {
      field.options[idx].text = text;
    }
  }
  field.options[idx].value = value;
}

Open in new window


I cannot say that I'm happy, but it does seem to work on IE11.
Any other suggestions to avoid this akward solution?
0
 

Author Closing Comment

by:Stefan Lennerbrant
ID: 40089240
This fixed the problem in IE11
It also worked for IE10 such that the workaround with "timed out" blur+focus is no longer needed there
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

649 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