Javascript conflicts with Asp.net runat=server attribute

Question

I am running some java script with a couple html controls. Everything works fine.

Except when I add the runat = " server" attribute to the html control, so I can access it in the code behind, the java script function does not work. Is this a common thing? Is there a work around for using a runat = " server" attribute with java script?

Or how can I access my Html control in the code behind WITHOUT using the run at server attribute?

Confused.

Answer 1

This is most likely occuring because your markup looks something like this:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div runat="server" id="myDiv">
    </div>
</asp:Content>

i.e. You're using a MasterPage or something else that acts as an INamingContainer. This results in the ID that's written out in the markup looking something like this:

<div>
    <div id="ContentPlaceHolder1_myDiv">
    </div>
</div>

If you're using asp.net 4 you can change your markup for myDiv by adding clientidmode="Static" and you'll then get:

<div>
    <div id="myDiv">
    </div>
</div>

Meaning your javascript will work again. If you're using earlier versions of asp.net then you'll need to do as SHAKKIR SHABBIR suggested and use <%=myDiv.ClientId%> to reference the element in your javascript so you get the "renamed" version of the ID that asp.net produces.

Answer 2

Okay, runat="server" is ok.

You need to modify the javascript.

If your control is input as:

<input id="control_ID" runat="server" />

Use <% = control_ID.ClientId %> in javascript to reference the control

it will work fine. However, if this doesnt work, share your code. I will solve!

Answer 3

<img alt="Calendar" onmouseover="javascript:this.style.cursor='hand';"
                    src="~/images/Calander_0.png" 
                    id="ImgCalender"  
                    onclick ="javascript:showCalendarControl('<%=txtAppointmentDate.ClientID  %>','mm/dd/yyyy');" 
                    runat="server"  />

If run at server is set JavaScript does not work