Changes using Text does not always show in IE9

[[email protected]…]

Hello,

Changing the text of a label with text() in IE9 doesnt seem to work properly.

I have created a test on jsfiddle ​http://jsfiddle.net/QS6jm/7/

When you change the radio button checked/selected it should change the text of the label showing below.

It works in IE7 and IE8, and also Firefox and Chrome.

Double clicking on the page / selecting some text will suddenly make it change the label to the correct value.

It very might well be that jQuery actually sets the value, but IE9 never updates the window (what is displayed).

Showing an alert box for example when the value is being changed (before or after) will change the value correctly.

[dmethvin]

To demonstrate the last sentence:

​http://jsfiddle.net/QS6jm/8/

Bizarre.

[Timmy Willison]

​http://jsfiddle.net/timmywil/QS6jm/15/

[[email protected]…]

Both innerText and contentText have the same problem (do not change as expected - without having to do an extra click).

innerHTML works fine.

[anonymous]

Funny enough, by a mistake i found out that using "invalid" code makes it work.

For example calling label[0].innerText("what"); after .text() have been called makes it work.

​http://jsfiddle.net/QS6jm/17/

[john]

Definitely weird, I think this is one of those cases where we just need to defer to the browser to fix this - and in the meantime use .html() instead.

[anonymous]

Has anyone found an easier solution to this? Thank you for this post -- it has been driving me crazy for hours now and I'm just happy to know I'm not alone

[anonymous]

Replying to anonymous:

Has anyone found an easier solution to this? Thank you for this post -- it has been driving me crazy for hours now and I'm just happy to know I'm not alone

Hi there, I just spent a long time trying to figure this problem out before coming across this bug report. The suggested fix in comment 4 didn't help me, but in my case, I found a fix that at least works for me.

instead of doing .text(value) or .html(value), try .text("" + value) or .html("" + value)

[anonymous]

Replying to anonymous:

Replying to anonymous:

Has anyone found an easier solution to this? Thank you for this post -- it has been driving me crazy for hours now and I'm just happy to know I'm not alone

Hi there, I just spent a long time trying to figure this problem out before coming across this bug report. The suggested fix in comment 4 didn't help me, but in my case, I found a fix that at least works for me.

instead of doing .text(value) or .html(value), try .text("" + value) or .html("" + value)

Correction to the above:

For the original jsfiddle example, changing .text() to .html() seems to fix the issue. For me, this still did not work. I was trying to find the amount of <option> tags in a <select>, store that into a variable, and update an element's text using that variable. .html() still did not work for me. My fix was to do .html("" + variable) which worked, BUT the same technique doesn't work with .text()...

[anonymous]

Replying to anonymous:

Correction to the above:

For the original jsfiddle example, changing .text() to .html() seems to fix the issue. For me, this still did not work. I was trying to find the amount of <option> tags in a <select>, store that into a variable, and update an element's text using that variable. .html() still did not work for me. My fix was to do .html("" + variable) which worked, BUT the same technique doesn't work with .text()...

Sorry to flood this ticket even more, but I've got another correction:

.html() works as a replacement for .text() if the argument is a string type (whether a string variable an actual string.) Otherwise, IE9 will show the same erratic behavior. Numerical types need to be explicitly converted to strings, for example, by using ""+intVal or intVal.toString(). I've only played around with this using ints.

.text() just does not seem to want to work with IE9 no matter what I try. Changing jquery versions to 1.8.2 didn't affect the bug.

[anonymous]

If you're setting text of a self closing tag e.g. <div />, try using a full closing tag e.g. <div></div>. Fixed my IE9 issue.

[jmdl1983]

For the record in order to solve this on my website, I had to do a combination of multiple suggestions on this page.

1, I had to change from using .text() to .html() 2, I had to add a blank string before and after my variable 3, I had to force IE to convert my variable to a string

So my final product looked like this: .html( + Variable.toString() + );

This is a behavior ONLY seen on Windows 7 w/ IE9 in Standards Mode. Compatibility mode does not display this behavior.