Update span from code behind ie

Question

I am using the following back-end c# code to see if I need to update the text inside a span.

c#:

if (status1.InnerHtml != temp1)
        {
            status1.InnerHtml = temp1;
            status1.Update();
        }

html:

<span runat="server" id="status1">Status 1</span>

This works fine in chrome and firefox, but it has issues in ie.

Visually, this is what happens (only in ie):

first time:

second time:

Possible Source of Error

I noticed that status1.InnerHtml always returns Status 1; as in it never changes. This leads me to believe that this is why it is creating a second element.

This means that I need to find a way to get the the current value of the span, using something besides InnerHtml (runat="server" was supposed to solve this issue).

Looking at the code in ie, on initial load, it is displayed properly. However, the second time I execute the code,

it turns

<ext.net.direct.update id="status1"/>
  <span id="status1">
    Text - Transfer completed
</ext.net.direct.update/>

(Note: the closing span tag was removed)

into

<span id="el_status1_container">
  <span id="status1">
    Text - Transfer completed
    <span id="status1">
      Text - Transfer completed
</ext.net.direct.update/>

(Note: <ext.net.direct.update id="status1"/> gets removed from the code, an element with a duplicate ID is inserted)

Any pointers would be greatly appreciated! Thank you

Answer 1

The solution I came up with was to make a button that when clicked loads the statuses. Using javascript, I clicked the button when it is generated with this code found from this post.

function initialload() {
    if (document.getElementById('Label1')) {
        document.getElementById("Label1").click();
    } else {
        setTimeout(initialload, 15);
}

This works because it turns out ie was ignoring the initial span (weird, but hey, it's ie) and using the second one to update it.

This is a workaround, so if anyone has a better answer, please share!