I am learning jQuery and as part of that i tried following code.. It was simple exercise to see if i can manipulate server controls using Jquery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestForm.aspx.cs" Inherits="TestForm" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/jscript"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<input id="HTMLButton" type="button" value="HTML Button" />
<script type="text/jscript" >
//Desired Behavior. The Command button outside Form Attribute works are desired.
$("input").click(function () {
$("#NameText").toggle()
});
$("#<%=WebCtrlJScript.ClientID%>").click(function () {
alert("Button btnToggleDiv from Name Clicked");
$("#NameText").toggle();
});
//This is simple HTML button inside Form Element.
$("#HTMLInsideForm").click(function () {
alert("Button HTMLInsideForm Clicked");
$("#NameText").toggle()
});
</script>
<script type="text/javascript">
function NameText() {
alert("WebCtrlOnClientClick Clicked");
$("#NameText").hide();
this.blur();
}
</script>
<form id="Form1" runat="server">
<div id="NameText">
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div>
<asp:Button ID="WebCtrlOnClientClick" runat="server" Text=".Net Button" OnClientClick="NameText()"/>
<asp:Button ID="WebCtrlJScript" runat="server" Text="JScript Button"/>
<input id="HTMLInsideForm" type="button" value="HTML Button(Inside Div)" />
</div>
</form>
</body>
</html>
It seems like anything i had inside form tags is not working.. for example first button with value=”HTML Button” can toggle div element with ID =”NameText” where as other buttons irrespective of whether they are HTML or server controls cannot hide the div. I am not sure what i am missing.
Thanks
CSC
You need to use
$('#<%= Button1.ClientID %>')...Unless you’re using .Net 4.0. In which case you can use the solution presented here: http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx