We Keep Coding

How to hide User Control div from aspx page?

In my user control i have below controls :
.ascx Page:
<div id="div1" runat="server">
<asp:Label ID="Lblname" Text="Name" runat="server"></asp:Label>
</div>
<div id="div2" runat="server">
<asp:TextBox ID="txtvalue" runat="server"></asp:TextBox>
</div>
<div id="div3" runat="server">
<asp:Button ID="btnClick" runat="server" Text="Click" />
</div>
aspx page
How to hide div1, div2 & div3 using c# or javascript

There is no need of javascript. You can easily put an
id="YourId" and runat="server". You can also add a Visible=False as default (or the other way if you want it to be visible as default). In .cs page, you can define and change the Visible value as you wish. So let's say you want it visible as a default only for administrator users, and you check in database if the user is an administrator with a true/false value (a bit value). then in PageLoad() you can perform a check like this:
if(LoggedUser.IsAdmin==true)
{
div1.Visible=true;
}
else
{
div1.Visible=false;
}

A C# implementation
You should be able to reference your divs by their IDs in the codebehind since you have runat set to server.
So, assuming you want this to occur on the page loading, to your Page_Load event, add:
div2.Visible = false;

You page renders html from your user controls as well as from master pages.
If you want to hide your elements then simply use this
$("#YouHTMLElement").attr("style","display:none");
One important thing: you need to specify clientidmode="static" on your divs because IDs of server controls changes when your html renders.
Updated: In C#, you need to do this
div1.Style.Add("display", "none");

Set asp.net textbox value using javascript

I want to set the value of a asp.net textbox using javascript
My JS Code is:
document.getElementById('<%=txtFlag.ClientID %>').value = "Track";
My textbox is:
<asp:TextBox ID="txtFlag" runat="server" Visible="False"></asp:TextBox>
But it gives me an error document.getElementById(...)' is null or not an object
I dont understand what is wrong.
Please help.

<asp:TextBox ID="txtFlag" runat="server" Visible="False"></asp:TextBox>
Setting visible=false will cause this textbox to not appear in the rendered page. Remove this, and add display:none;
<asp:TextBox ID="txtFlag" runat="server" style="display:none;"></asp:TextBox>

Try including the ClientIDMode property in your textbox
<asp:TextBox ID="txtFlag" runat="server" Visible="False"
ClientIDMode="Static"></asp:TextBox>

You are calling javascript before complete document load. Please write your javascript code on document.ready function like this
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
document.getElementById('<%=txtFlag.ClientID %>').value = "Track";
});
</script>
And second thing is that use display none in place of visible false or use hidden field control
<asp:TextBox ID="txtFlag" runat="server" style="display:none;"></asp:TextBox>

Solution 1:
Make that textbox as visible=true and try,
When you make a control as visible false, that control will not be loaded in client side and as you knew javascript will be executed on client side itself.
Solution 2:
Add this javascript at the end of the page.

document.getElementById('txtFlag').value='Track'
try this

Javascript-error on finding object

im stuck with Javascript in Asp.net...
I made a TextBox named tbValidFrom and another named tbValidTo.
I also made two ModalPopups.
Then i try to open the ModalPopupExtenders when the TextBoxes get focus:
<script type="text/javascript">
$('#tbValidTo').focus(function () {
$find('ModalPopupExtenderNV1').show();
})
$('#tbValidFrom').focus(function () {
$find('ModalPopupExtenderNV2').show();
})
</script>
but it doesnt finds tbValidTo or ModalPopUpExtender ?
Runtime-Error in Microsoft JScript: Object expected
Here is one of the two ModalPopupExtenders and TextBoxes:
<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<cc1:ModalPopupExtender ID="ModalPopupExtenderNV2" runat="server" TargetControlID="HiddenField6"
PopupControlID="PanelNewVersion" BackgroundCssClass="modalBackground" BehaviorID="ModalPopupExtenderNV2"
Enabled="True" />
<asp:HiddenField ID="HiddenField6" runat="server" />
</ContentTemplate
</asp:UpdatePanel>
The same as above is with the other ModalPopupExtender and TextBox...
Help would be really nice.
Thanks
Edit: Yes i use a masterpage!
Fails where it is marked yellow.

your jQuery syntax is wrong.
change your script to:
<script type="text/javascript">
$('#tbValidTo').focus(function () {
$(this).find('#<%=ModalPopupExtenderNV1.ClientID%>').show();
});
$('#tbValidFrom').focus(function () {
$(this).find('#<%=ModalPopupExtenderNV2.ClientID%>').show();
})
</script>
elements that has runat="server" will eventually end with a different ID than you entered in the aspx file.
i used the <%= %> to get the 'final' id.
hope that helps

Seeing that markup there is two chances for the issues.
With the ModalPopupExtender.
Where you have given the panel "PanelNewVersion" . Seems like its missing in the markup.
In the Javascript code. If you want to hide that Popup, give the name of the panel. NOt the name of the ModalPopupextender.
Also you have given an update panel there in page, so you can easily handle the modalpopup in any srever side event of your textbox.
Otherwise, if you want to use the Modal popup ijn client side, use jQuery Modalpopup. That will the better option.

ASP.NET Can modify the ID's of elements, if you use a Masterpage the element id's will be modified to something like the following : ctl001_ContentPlaceHolder1_tbValidFrom
To get around this ASP.NET modification of your elements you can use ASP.NET Inline Expressions to get the rendered ID from the object.
See the answer to the following question for more information on ASP.NET Inline Expressions
You can look at changing the Client ID Mode (The way ASP.NET Modifies IDs when the page is rendered) here :
ASP.NET Client ID Modes
EDIT :
The AjaxControlToolkit's ModalPopupExtender is not rendered on the page as a html element, therefore you cannot find this item using the ClientID of the ModalPopupExtender.
You must use the BehaviourID to call the show function on.
The below code should work correctly :
$('#<%= tbValidTo.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV1').show();
})
$('#<%= tbValidFrom.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV2').show();
});
This will find the textbox object using the ASP.NET Inline expressions to find the client ID and will then find the behaviour ID and execute the Show method.
Example Markup :
<script type="text/javascript">
$(document).ready(function() {
$('#<%= tbValidFrom.ClientID %>').focus(function () {
$find('ModalPopupExtenderNV2').show();
});
});
</script>
<asp:TextBox ID="tbValidFrom" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelNV2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<cc1:modalpopupextender id="ModalPopupExtenderNV2" runat="server" targetcontrolid="HiddenField6"
popupcontrolid="PanelNewVersion" backgroundcssclass="modalBackground" behaviorid="ModalPopupExtenderNV2"
enabled="True" />
<asp:HiddenField ID="HiddenField6" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="PanelNewVersion" runat="server">
testing panel
</asp:Panel>

Setting a panel to visible using javascript

How can I make a <asp:Panel> visible using javascript?
I have done the following but get an error (Cannot Read property style of null)
<asp:Panel runat="server" id="panNonAfricanCountries" Visible="false">
var panNonAfricaDropDown = document.getElementById("panNonAfricanCountries")
if (dropDownFirst == "Yes") {
panNonAfricaDropDown.style.visibility = "visible";
}

The Visible="false" on an asp.net control have as result to not render the control on the page.
What you try to do here is to render it, but with css style to have it hidden from the user until using javascript show it. To archive that do not use the Visible, but set a style or a css to your Panel.
<asp:Panel ID="PanelId" runat="server" Visible="true" style="visibility:hidden" >
Some Content here...
</asp:Panel>
The asp.Panel is render as div and your html on the page will probably as:
<div id="PanelId" style="visibility:hidden">
Some Content here...
</div>
and I say probably because we do not know for sure how the Id is rendered. To get it we use the PanelId.ClientID and your final javascript code will be:
var panNonAfricaDropDown = document.getElementById("<%=PanelId.ClientID%>");
if (dropDownFirst == "Yes" && panNonAfricaDropDown) {
panNonAfricaDropDown.style.visibility = "visible";
}

ASP.NET mangles the names of elements that run on the server. You will have to find the mangled name and then do document.getElementById on that name.
Alternatively, you can use the ClientIDMode property of asp:panel to turn off the mangling (http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx)

setting label value in javascript

I have code like this
<table>
<tr>
<td>
<div>
<asp:Label runat="server" ID="lblBookmarksIds" Style="visibility: hidden;" Text="test"/>
</div>
</td>
<td>
<asp:UpdatePanel runat="server" ID="buttonPanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button runat="server" ID="btnInvokeImageRead" CausesValidation="false" UseSubmitBehavior="false"
OnClick="btnInvokeImageRead_Click" Style="visibility: hidden;" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
in javascript i'm trying to set value of label and call codebehind function so that i will have desired value passed to codebehind like that :
alert(document.getElementById('<%= lblBookmarksIds.ClientID%>').firstChild.nodeValue);
document.getElementById('<%= lblBookmarksIds.ClientID%>').innerText = str;
alert(document.getElementById('<%= lblBookmarksIds.ClientID%>').firstChild.nodeValue);
//alert('1');
if (str != "") {
document.getElementById('<%= btnInvokeImageRead.ClientID%>').click();
}
when second alert gets displayed the value of lblBookmarksIds has changed value, but when i debug in codebehind function btnInvokeImageRead_Click the value of lblBookmarksIds has its old value.
Anybody knows Why ?
Regards
Wojciech

Labels are not passed to code behind. You will have to use an input(TextBox) for that purpose.
You can style an input to look like a label using CSS.
Alternatively, you can keep the value in a hidden field, and use javascript to show the value in a label and pass it back in the hidden field.

The reason ASP.NET is able to "see" the values entered into a TextBox and similar controls is because the values of these controls are sent in the POST body when the page posts back. You can see this through any number of tools, including the Developer Tools your browser likely includes or an intercepting proxy like Fiddler. When the postback occurs, each of those controls has a LoadPostData function that processes the POST data and updates the Text properties (or whatever properties) of the control.
The contents of a Label are not submitted in the POST data, so .NET has no way to see any changes made to it from JavaScript.
The controls that do process post data all implement IPostBackDataHandler.