Develop Reference

JQuery ASP hidden issues

Depending on the result of a checkbox, I want to hide/reveal a hidden table (hidden from page load), asking for more information.
The JQuery and ASP is below, can someone point me in the right direction and let me know what I'm doing wrong with this approach.
ASP
<h3>Table Heading</h3>
<asp:Table ID="tbl1" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
<h4>One</h4>
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell>
<asp:CheckBox ID=""Yes" runat="server" Checked="false" Text="Yes" />
<asp:CheckBox ID="No" Text="No" runat="server" Checked="false" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:Table ID="tbl2" runat="server" Visible="false">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
<h4>Additional information</h4>
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell><asp:TextBox ID="AddInfo" runat="server" TextMode="MultiLine"></asp:TextBox></asp:TableCell>
</asp:TableRow>
</asp:Table>
JQuery
<script type="text/javascript">
function toggleTable()
{
$(function () {
$("#Yes").click(function () {
$("#tbl2").show();
})
$("#No").click(function () {
$("#tbl2").hide();
})
}
</script>
Update 1
As suggested I removed the wrapping function, this still didn't work.
<script type="text/javascript">
$(function ()
{
$("#Yes").click(function () {
$("#tbl2").show();
})
$("No").click(function () {
$("#tbl2").hide();
})
})
</script>
Raw HTML
<h3></h3>
<table id="MainContent_tbl1">
<tr>
<th>
<h4></h4>
</th>
</tr><tr>
<td><input id="MainContent_Yes" type="radio" name="ctl00$MainContent$Yes" value="Yes" />
<label for="MainContent_Yes">Yes</label><input id="MainContent_No" type="radio" name="ctl00$MainContent$No" value="No" />
<label for="MainContent_No">No</label></td>
</tr>

When you had used visible=false in server control, that had done this - It removed that control entirely from page when rendered.
More about Visible property - If this property is false, the server
control is not rendered. You should take this into account when
organizing the layout of your page. If a container control is not
rendered, any controls that it contains will not be rendered even if
you set the Visible property of an individual control to true. - http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible(v=vs.100).aspx
So i would suggest, if you are doing show/hide from server side code, then set attribute (CSS) style= display none . If you directly use visible property and set it to false, it will remove control from page, there will be no way to show in page.
E.g. tbl1.Attributes.Add("style", "display:none");
In client-side hide it using style=display:none" instead of visible=false.
Also, ,use .ClientID to get exact render ID for jquery selector. Like
$("#<%=tbl1.ClientID%>").show();

Take away the toggleTable() wrapping function and it should work as you've suggested.
The $(function () { runs when the document is ready and should turn on the click listeners at that point.
I'd also point out that the logic is flawed. Checkboxes can all be turned on so you might want to use radio buttons instead so only one can be checked.

In your jquery get everthing by ClientID as it is asp it will rename it(as you can see it has added MainContent_ to your control ids) so do this :
$("<%=tbl2.ClientID %>").click{....
Or add ClientIDMode = "Static" to your controls e.g.:
<asp:Table ID="tbl1" runat="server" ClientIDMode = "Static">

How do I add my own attribute to a Telerik RadMaskedTextBox

I need to add my own attribute to a RadMaskedTextBox but can't seem to do it. Any ideas?
Here's the aspx:
<telerik:RadMaskedTextBox
ID="txtSocial_Security_Number" runat="server" SelectionOnFocus="SelectAll" Mask="###-##-####"
requiredrule='<%#required("Social_Security_Number_Or_Federal_Identification_Number")%>'
onkeyup="ValidateTBNew()">
</telerik:RadMaskedTextBox>
The requiredrule pulls a rule from the back end, as you can see. But when Telerik renders the control, the requiredrule is gone! Here's the rendered HTML:
<span id="RadPanelBar1_i2_i0_txtSocial_Security_Number_wrapper"
class="riSingle RadInput RadInput_Default"
style="width:130px;">
<input id="RadPanelBar1_i2_i0_txtSocial_Security_Number"
name="RadPanelBar1$i2$i0$txtSocial_Security_Number"
type="text" size="20"
class="riTextBox riEnabled"
onkeyup="ValidateTBNew()"
value="111-11-1111" />
<input id="RadPanelBar1_i2_i0_txtSocial_Security_Number_ClientState"
name="RadPanelBar1_i2_i0_txtSocial_Security_Number_ClientState"
type="hidden" />
</span>
My onkeyup is there but no sign of the requiredrule. The reason for the requiredrule is so that it can be used to determine one of several states of failure - in the javascript function called in the onkeyup event.

Here's the way I was able to git-er-done...
I was using the RadMaskedTextBox but Telerik says that they are deprecating it. Instead, I used an asp:TextBox and the RadInputManager. Here's the code if you need it.
<asp:TextBox ID="txtSSN" runat="server"
requiredrule='<%#required("Social_Security_Number_Or_Federal_Identification_Number")%>'
onkeyup="ValidateTBNew()"></asp:TextBox>
and
<telerik:RadInputManager ID="RadInputManager1" runat="server">
<telerik:MaskedTextBoxSetting Mask="###-##-####" SelectionOnFocus="SelectAll">
<TargetControls>
<telerik:TargetInput ControlID="txtSSN" />
</TargetControls>
</telerik:MaskedTextBoxSetting>
</telerik:RadInputManager>
This way, the TextBox correctly renders with my extra requiredrule attribute and the formatting of the SSN is done with the RadInputManager.

How Do I Pass ASP.NET Control Name to Javascript Function?

I have Googled this to death and found lots of 'answers', but none of them will work for me, so maybe you clever people could give me a 'definitive' answer?
I have a Javascript function:
function enableSaveLink() {
document.getElementById('<%= btnSaveLink.ClientID %>').removeAttribute('disabled');
}
This works fine, but obviously it is hard-coded to enable a particular control on my page. What I'd like is to be able to call this function from any control on the page, passing the name of the control I'd like to enable as a variable. So, in an ideal world, my Javascript function would look like this:
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
And I'd call it like this:
<asp:button id="btnTestButton" runat="server" Text="Click Me" onclientclick="enableControl('txtTestTextbox') />
<asp:button id="txtTestTextbox" runat="server" enabled="false />
I know the way I've passed the control name would never work, but I've tried passing it in all different ways and none work, so this is just for the purposes of illustration. Can anyone tell me how to actually make this work?

You need to use the ClientID property of the control.
This will help:
<asp:button id="btnTest" runat="server" Text="Click Me"
onclientclick="enableControl('<%= lblTest.ClientID %>') />

Use the this reference (more info here):
<asp:button id="btnTest" runat="server" Text="Click Me" onclientclick="enableControl(this);" />
Then in your script:
function enableSaveLink(elem) {
elem.removeAttribute('disabled');
}
Here you are passing a reference to the object calling the function to the function, you can then just set the attribute on the element rather than finding it in the DOM.
EDIT - Just realised what your intended usage is. If you're looking to fire an event from a disabled element when clicked, then you can't do this from the element. It would need to be handled from some other enabled element. The above method works fine if you intend to disable the element when clicked - but not enable the element when clicked.
EDIT - Just to accompany my comment, if you have a uniform structure like this (i.e. where all inputs have a corresponding label - or even button) then:
<div>
<label onclick="activateSibling(this);">Input One:</label>
<input type="text" />
</div>
You could try this:
function activateSibling(label) {
label.nextSibling.removeAttribute("disabled");
}
I've made a jsFiddle demonstrating my concept in jQuery which seems to work fine.
EDIT - OK, last idea. What about custom attributes. You could add a target attribute to your clickable element which contains the Id you're going to enable, like so:
<label target="active_me" onclick="activate(this);">Click to activate</label>
<input type="text" id="active_me" disabled="disabled" />
And your script:
function activate(label) {
var inputId = this.getAttribute("target");
var input = document.getElementById(inputId);
input.removeAttribute("disabled");
}
Although, it's starting to feel like we're fighting against the technology a little and we're not too far removed from ctrlInput.ClientID. But I suppose this makes your markup a little cleaner and gives you a function that's bindable en masse.

Ok, I've cracked it. There are probably more ways than one to do this, but this is fairly elegant.
My Javascript function:
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
My ASP.NET markup:
<asp:Button ID="btnTestButton" runat="server" Text="Click to enable" OnClientClick="enableControl('txtTestTextbox');" />
<asp:TextBox ID="txtTestTextBox" runat="server" enabled="false" ClientIDMode="Static" />
The key is the ClientIDMode property, which, when set to static, means that the control's client-side ID when it is rendered will match the ID you give it in markup. If it's within a naming container you may need to include that in the variable passed in the function call. See here for more info about ClientIDMode.
Anyway, this works for me! Thanks for your input, everyone.

ClientID is used for getting server side control on javascript.
var element=document.getElementById('<%=lblTest.ClientID%>');

Client id method javascript

<input type="text" id="txtFirstName" runat="server" class="textReg"
onblur="javascript:validate_input(<%=txtFirstName%>,'imgFirstNameS','imgFirstNameE');" />`
I want to send control id to my javascript function
like ctl00_ContentPlaceHolder1_txtFirstName
or
function validate_input(control, success, error) {
control = document.getElementById('<%='+control+'.ClientID %>');
}
is it possible ?

Why send the Id if the next thing you do is get the item by Id. Just put 'this' as first parameter.
<input type="text" id="txtFirstName" runat="server" class="textReg"
onblur="validate_input(this,'imgFirstNameS','imgFirstNameE');" />

Since you are using jQuery remove your inline js handler and put something like
If you want to hook the event for a bunch of textboxes having the class testReg then you can do something like
$("input:text.textReg").blur(function(){
validate_input(this, 'imgFirstNameS', 'imgFirstNameE');
});
If you want this for the textbox with id txtFirstName only then you can have something like
$("<%= txtFirstName.ClientID %>").blur(function(){
validate_input(this, 'imgFirstNameS', 'imgFirstNameE');
});

To answer the direct question, here is the proper syntax for this:
<input type="text" id="txtFirstName" runat="server" class="textReg"
onblur="validate_input('<%=txtFirstName.ClientID%>', 'imgFirstNameS', 'imgFirstNameE');" />
However TurBas idea is better, pass this and use it directly.

<input type="text" id="txtFirstName" runat="server" class="textReg"
onblur="javascript:validate_input(<%=txtFirstName.ClientID%>,'imgFirstNameS','imgFirstNameE');" />

Editing a labels text value through JavaScript

I have a simple in VB/ASP.NET form containing two text boxes, I am attempting to apply some validation to the first text box using JavaScript. This is the first time I have attempted this and am having some trouble.
I have a label beside the text box stating an error, this labels visibility property is set to False. I wish the labels visibility to turn true if the text box is empty when the user loses focus.
For this I have used the onBlur option within the tags of the text box. It then calls the JavaScript function and should set the label to Visible but it does not. I have tested to see if it is entering the function by using an alert instead and that works. The problem seems to be trying to alter the visibility property of the label.
Here is the portion of my code:
The JavaScript:
function myRegEx(frm) {
if ( boxUsername.value == "" ) {
invalidUser.visible = True;
return false;
}
}
The form:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:Label id="invalidUser" runat="server" visible="False" forecolor="Red" text="* Username must be alphanumeric with no special characters"></asp:Label>
Any help would be brilliant.

Here's another StackOverflow question that has the answer for you:
Change visibility of ASP.NET label with JavaScript

I suggest you use and ASP.Net Validation control, specifically the RequiredFieldValidator.
This will take care of the label for you, plus make certain the correct validation happens both client side (javascript) and server-side (vb).

You're using the deprecated IE-only feature that turns elements with IDs into global variables.
You should call document.getElemenntById instead.
Also, you need to use ASP.Net's generated client IDs.
Finally, to hide an element, you need to use CSS; HTML doesn't have a visible property.
For example:
document.getElementById("<%=invalidUser.ClientID %>").style.display = "none";
However, you should use ASP.Net's built-in validation feature instead.

Why not use an ASP.NET RequiredFieldValidator like so:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="boxUsername" Display="Dynamic" ErrorMessage="Please enter a value" />
If that is too simplistic then you can use a RegularExpressionValidator:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please enter alpha numeric characters." ValidationExpression="[my reg ex]" ControlToValidate="boxUsername" Display="Dynamic" />