Accessing asp.net web server controls from jquery

Question

In my C# asp.net 3.5 web application I am having controls like div tag inside that one textbox and one check box and the page is having a submit button. So in this submit button click I want to make the controls inside the div tag visible.. I am calling a JQuery function to do this. All the statements are getting executed but the control is not visible.. Following is the code in my JQuery function

$("input[name$='QuestionAndAnswerEditorDiv']").show();
$("input[name$='answerLabel1']").show()
$("input[name$='wmd-AnswerTextBox']").show() 

My div tag and its controls in the user control page are like the following

 <div id="QuestionAndAnswerEditorDiv" runat="server">
 <div id="wmd-button-bar" class="wmd-panel wmd-button-row"></div> 
 <textarea name="QuestionandAnswerTextArea" runat="server" id="AnswerTextBox" onkeyup="prettyPrint();" class="wmd-input editor" cols="92" rows="15"/><div class="wmd-preview text-preview preview" style="-ms-word-wrap: break-word;"></div>

As I noticed these controls are make visible=false in another page so they are not coming in the page source.. So Let me know how to work these controls now

Answer 1

all web server controls in asp.net < 4 are not rendered using their given name. to use the rendered name use Control.ClientID

Answer 2

Setting QuestionAndAnswerEditorDiv.Visible = false; will mean that it doesn't get rendered to the page. In your code behind do the following:

QuestionAndAnswerEditorDiv.Attributes.Add("style", "display:none");
QuestionandAnswerTextArea.Attributes.Add("style", "display:none");

the JQuery show() function uses the display property and will set it to "block", which will make it visible.

Answer 3

This may not work because div is not going to render as input element and label is rendered as span element in asp.net so check for the type of controls

for div
$("div[name$='QuestionAndAnswerEditorDiv']").show();

for label
$("span[name$='answerLabel1']").show()

for textbox
$("input[name$='wmd-AnswerTextBox']").show() 

Edit :

so as i suggested in my answer make use of proper jquery selctor so that this will work for you

Edit 1

So rather than making control visible= false set there sytles to disply:none so that controls avaialbe on you page and you can play with them using jquery/javascript