CODEWITHSUNDEEP
javascriptc#
starvator
starvator

Reputation: 1017

Calling c# then js on same element

I am using the following c# to change content from the server side:

this.StatusPreview.InnerHtml = "server side";
this.StatusPreview.Update();

I am using the following js to change content on the client side:

document.getElementById('StatusPreview').innerHTML = "client side";

If I execute the js first, there is no problem. However, If I execute the c# first, then the js, I get a,

Uncaught TypeError: Cannot set property 'innerHTML' of null

on the js line.

This is the element being affected: 

<td id="StatusPreview" runat="server"> </td>

When I execute the c#, it changed the td to 

<span id="el_StatusPreview_container">asd</span>

Is there a way that would allow me to update c# first, without turning my element null?

Thank you!

Upvotes: 0

Views: 70

Answers (3)

CM Kanode
CM Kanode

Reputation: 1436

Since you want to update via server side and client side, you should change your methodology.

Leave the td tag as a plain tag, and add a label as a child: 

<asp:Label ID="StatusPreview" runat="server" ClientIDMode="static" />

If JavaScript updates it first, it will find the element. If the server side updates it, then with the ClientIDMode set to static, it will not change the ID and since it is a web control already, it will not create a new element, hence the JavaScript can still find it.

Upvotes: 1

Manoj Purohit
Manoj Purohit

Reputation: 3453

You can use 

document.getElementById('<%= StatusPreview.ClientID %>').innerHTML = "client side";

This will change id of StatusPreview in accordance to it's id at client side.

Upvotes: 0

Rhumborl
Rhumborl

Reputation: 16609

I don't know why the td is being turned into a span but the javascript cannot find it because of the ASP.NET naming convention, where by default it will add the ID of its parent INamingContainer to the ClientID of the element. You can get around this by setting the ClientIDMode of the control to Static, so that it will be set to the same as the ID:

<td id="StatusPreview" runat="server" ClientIDMode="static"> </td>

Upvotes: 0

Related Questions