We Keep Coding

hiding the link buttons when user leaves the text box

I have a text box and two link buttons on my web page. When I put some value on the text box, based on that value and also as soon as I leave the textbox. I want to hide or make the link button invisible.
<asp:textBox id="textBox1" runat="server">
<asp:linkButton id="link1" runat="server">
<asp:linkButton id="link2" runar="server">
when the user enter value "X" in the textbox, I want to hide Link1 and Link2 otherwise I want Link1 and Link2 to be visible.
here is my code and it is not working:
function HidePick(selectObj) {
if (selectObj.value.toUpperCase() == "D9") {
document.getElementById("LINK1").style.display = 'none';
}
}
<td><asp:TextBox ID="TXTTest1" runat="server" CssClass="cssTest" Width="30" onmouseout="javascript:HidePick(this);"
With error message:
"JavaScript runtime error: Unable to get property 'style' of undefined
or null reference

For that kind of DOM manipulation, it is easy with jQuery.
JS Fiddle - https://jsfiddle.net/p8pm6r5r
<asp:TextBox ID="textBox1" runat="server" />
<asp:LinkButton ID="link1" runat="server" Text="Button1" />
<asp:LinkButton ID="link2" runat="server" Text="Button2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#<%= textBox1.ClientID %>").blur(function () {
if ($(this).val() === "X") {
$("#<%= link1.ClientID %>").hide();
$("#<%= link2.ClientID %>").hide();
}
});
})
</script>

In asp.net the final render id may change on page, so on javascript you need to use the .ClientID of control... you code must be as:
document.getElementById("<%=link1.ClientID%>").style.display = 'none';
Related: Accessing control client name and not ID in ASP.NET

<asp:textBox id="textBox1" runat="server">
<asp:LinkButton ID="link1" runat="server" Text="Button1" />
<asp:LinkButton ID="link2" runat="server" Text="Button2" />
Assuming you don't want to use jQuery or any library;
At the end of your htmls in .aspx page add a script tag to bind the button to mouseleave or mouseout events. Just to make sure your textbox1's id is static (the way it is in your source), once your page is rendered on the browser check for your textbox1 and see if it has still the same id if not then copy that id and replace in the below event binder line of javascript code from textbox1 to (whatever_textbox1). Same step for your link ids too.
document.getElementById("textBox1").addEventListener("mouseout",HidePick,false);
function HidePick(e){
if (e.target.value.toUpperCase() == "D9")
document.getElementById("LINK1").style.display = 'none';
}

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");

OnClientLoad Property in Asp.Net

In .aspx page when we are using radcombobox and all, onclientload attribute has been used.....
To handle that OnclientLoad Handler function has been written in javascript.
Actually what my ques is what is the use of OnclientLoad Property and OnClientLoad Handler Function in that. When it has to used. what are all the arguments it can accept... How it is working...
This is the program i have tried
<script type="text/javascript" language="javascript">
var rad_CatType_Id, radcb_OfferFormat, Rad_Footer;
function OfferFormat_onClientLoadHandler(sender, args) {
radcb_OfferFormat = sender;
}
</script>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<table class="table_Style">
<tr>
<td style="width: 15%">
Select Grade Category
</td>
<td style="width: 20%">
<Telerik:RadComboBox AutoPostBack="true" runat="server" ID="radcb_GradeCat" Width="165px"
MarkFirstMatch="true" CausesValidation="false" OnClientLoad="rad_Cattype_onClientLoadHandler">
</Telerik:RadComboBox>
</td>
<td>
<asp:CompareValidator ID="cmp_cat" runat="server" ErrorMessage="Please select Category"
ValidationGroup="List" ControlToValidate="radcb_GradeCat" ValueToCompare="Select"
Operator="NotEqual"></asp:CompareValidator>
</td>
</tr>.....
Anyone please help me with detailed example..
Thanks in Advance.......

The OnClientLoad client-side event occurs after the combobox | RadControl has been fully initialized on the client-side.
The event handler receives one parameter:
The combobox instance firing the event.
This event is helpful if you need to get the client-side instance of the combobox when it is embedded in other controls. Hook the OnClientLoad event and get the client-side instance of the combobox as demonstrated in the example below. This technique can be used to retrieve the combo instance for use elsewhere.
function OnClientLoadHandler(sender) {
var combo;
combo=sender;
}
<telerik:RadComboBox
ID="RadComboBox1"
runat="server"
OnClientLoad="OnClientLoadHandler" .../>
This technique may not work when AJAX is used. The asynchronous
requests may interfere with the OnClientLoad event.

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>

Can we access ASP.Net's web user control 's child controls using javascript

I have a web user control. I want to know how to access its child control , using java script, when we use it in another page.
Suppose my control is as below:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="UCS.ascx.cs" Inherits="UCS" %>
<asp:Panel ID="rbtnPanel" runat="server">
<asp:RadioButton ID="rbtnEn" runat="server" GroupName="scan" Checked="true" Text="Entire" style="margin-left: -7px;"/>
<asp:RadioButton ID="rbtnCu" runat="server" GroupName="scan" Text="Custom" style="position: absolute; margin-left: 2px;"/>
</asp:Panel>
update:
I have added it in the page as: Try.aspx
<%# Register Src="~/UserControls/UCS.ascx" TagName="UCS" TagPrefix="ucSc" %>
<table>
<tr>
<td>
<usSc:UCS id="UCS1" runat="server" />
</td>
</tr>
</table>
try.aspx: javascript:
$(document).ready(function() {
setPageLayout(2, 0, true);
startTimer();
}
function startTimer()
{
alert(document.getElementById("<%= rbtnCu.ClientID %>").checked);
}
So if I use this control in another page by registering it. How can I access the RadioButton in that Try.aspx page's javascript section.
Thanks in advance!

You can use id selector, since the ClientIDMode for radio button is not static you will have to use ClientID as the id generated by asp.net is not what you see as a server id.
rbrbtnEn = document.getElementById(('<%= rbtnEn.ClientID %>');
To get the checked status
alert(document.getElementById('<%= rbtnEn.ClientID %>').checked);