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';
}

jQuery event not firing from my asp.net control

I'm fairly new to jQuery and I was trying to achieve some of this functionality in client-side rather than my usual server side code. I just figured that I would add some click events, to get some practice, etc...but I'm seeing this issue and not sure where to start troubleshooting as it is working on my stand alone html page.
This is a web app page which inherits from a Masterpage (Site.Master). I was modifying the .js file a bit as I have been running around a bit by placing the Alert() just to see something...but that wasn't firing.
Why are my events not firing?
HTML:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"
CodeBehind="ProductMaintenance.aspx.vb" Inherits="CStock.ProductMaintenance" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" >
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="" cssClass="pnl1">
</asp:Panel>
<div class="mainGroup">
<div class="headerGroup">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<select name="type" id="type">
<option value="Categories">Categories </option>
<option value="Products">Products </option>
</select>
</div>
</div>
<div>
<asp:Button ID="submitform" runat="server" Text="Button" />
<asp:Button ID="HideButton" runat="server" Text="HideButton" />
<hr />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="sqlData">
...
...
...
</div>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/site.js"></script>
Javascript (site.js)
$('#submitform').on('click', function (event) {
Alert("TESTING");
$( ".HideButton" ).hide();
$( "#HideButton" ).hide();
})
$('input[name=submitform]')
.click(
function ()
{
$(this).hide();
$( ".HideButton" ).hide();
$("#HideButton").hide();
Alert("TESTING");
}
);
Updated Javascript:
$('#submitform').on('click', function (event) {
Alert("TESTING");
// $( ".HideButton" ).hide();
// $( "#HideButton" ).hide();
})
$('input[id*=submitform]')
.click(
function ()
{
Alert("TESTING2");
}
);
$('input[name=submitform]')
.click(
function () {
Alert("TESTING2");
}
);
Separately, which method to add the events is best practice?

Your events aren't firing because .NET translates your IDs when they're server controls (has the runat="server" attribute). For instance, you gave the button the ID "submitform", but when it's generated on the page it's probably something like "ctl00_container_submitform". Take a look at the generated page source and you'll see what I mean. You can still accomplish what you want with jquery. Just change your selector to $("[id*=submitform]") which will look for any control with the attribute "id" that ends with "submitform".
EDIT:
Since your button is in an update panel, you'll want to update to the following:
$(document).on('click', '[id*=submitform]', function () {});
Check out the documentation for "on" here http://api.jquery.com/on/
When the content in the update panel is replaced, the binding for that button is being lost. if you bind to the document (which is static), the binding will always be in effect. The optional selector parameter indicates that the function should be fired if the document is clicked, and if the element in the document matches the selector.

add the attribute ClientIDMode="static to the buttons
<asp:Button ID="submitform" runat="server" Text="Button" ClientIDMode="Static"/>
<asp:Button ID="HideButton" runat="server" Text="HideButton" ClientIDMode="Static" />
then you can reference them by just $("#submitForm") and $("#HideButton")
in order to guarantee unique IDs webforms adds things to the id field when it is added. Changing ClientIDMode to static tells it that you will make sure that it will always be unique and it will give you the proper ID

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>

How to add a Javascript event handler using asp.net ajax

I am wondering how to add a Javascript event handler using asp.net ajax.
I need to add event handlers after ajax update because jQuery plugin to sort tables doesn't work and the onload method to display a screen keyboard does not trigger as well.
Is there a way to do that?
Maybe I need to switch to some other ajax library or/and try Asp.Net MVC to accomplish?

Your question is a little unclear. Anyway, if you are after to add an event handler to an element after partial update, check the following sample.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
if (prm.get_isInAsyncPostBack) {
$addHandler($get("Button1"), "click", function() {
alert("This is a test...");
});
}
});
</script>