Javascript conflicts with Asp.net runat=server attribute
-
16-06-2021 - |
Frage
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.
Lösung
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.
Andere Tipps
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!
<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