I have a label on my form like so:
<asp:Label ID="lblPwPol"
runat="server"
Visible="false">
A bunch of text...
</asp:Label>
In a method called by the Page_Load event (VB.net), I attach some JS event handlers with this:
btnPasswordPolicies.Attributes.Add("onClick", "return mShowToolTip();")
cmdPasswordPolicies.Attributes.Add("onmouseleave", "return mHideToolTip();")
Which are defined as such:
function mShowToolTip(aCtrl, aArg1)
{
document.getElementById("lblPwPol").style.display = 'block';
return false;
}
function mHideToolTip()
{
document.getElementById("lblPwPol").style.display = 'none';
return false;
}
When my form loads, the label is not visible (correct).
When I click the label, I get an exception in my JS:
Javascript runtime error: Unable to get property 'style' of undefined or null reference
Which obviously means that document.getElementById("lblPwPol") returns null.
Any idea what I'm doing wrong? I feel like it's got to be something rally stupid, but I don't know JS at all.
I tried also switching out the id="lblPwPol" to be name="lblPwPol" instead, but that didn't make a difference.
First thing you should remove visible="false" to the label, because of you make it visible false it won't load in Dom. And keep style="display:none"
Like this
<asp:Label ID="lblPwPol"
runat="server"
Style="display:none">
A bunch of text...
</asp:Label>
I think you are confusing DOM elements with ASP WebUI WebControl elements (that are XML as well btw). Take a look at here how to access a Label control like yours: How to access asp:label text property from code behind?
Related
Suppose I have asp Lable set in markup like:
<asp:Label ID="myID" runat="server"></asp:Label>
then set value for this Label in code behind like:
myID.Text =100
then I want get the value 100 in javascript. I tried:
document.getElementById('<%=myID.ClientID%>').value;
but is not working. How to resolve this issue?
I believe that labels render as spans. Try getting the inner text.
document.getElementById('<%=myID.ClientID%>').innerText;
With jquery you need to use the html property.
var g = $('#<%=myID.ClientID%>').html();
These will NOT work with jquery
$('#<%=myID.ClientID%>').innerText
$('#<%=myID.ClientID%>').innerHTML
$('#<%=myID.ClientID%>').val()
var label=$("#<%myID.ClientID%>").html();
this is my control:
<asp:TextBox ID="txt_rol" onkeyup="this.value=this.value.toUpperCase()" runat="server" BorderColor="#E0E0E0" BorderStyle="Solid" Width="240px"></asp:TextBox>
</strong>
<asp:ImageButton ID="imgBtnGuardar" runat="server" ImageUrl="~/imagenes/boton.guardar.jpg" OnClientClick="ValidaCajadeTextoVacia(document.getElementById('<%=txt_rol.ClientId%>'));MensajeCargandoJQUERY();"/>
The problem is, that i can't get the Id of the textbox.
Well, right off the bat I can tell you that there's a syntax issue in the code. It should be:
'<%= txt_rol.ClientID %>'
There may be other obstacles you need to overcome here too. For example, if these controls are nested in a GridView you won't be able to reference the control that way.
function masterClick(clicked, controlID) {
var dynCtrl = clicked.id.substring(0, clicked.id.lastIndexOf("_") + 1);
var tBox = document.getElementById(dynCtrl + controlID);
tBox.value = "";
tBox.focus();
}
Then call from your image button like...
masterClick(this,'txt_rol');
change tBox.value and focus to whatever action you like, but should have access to the control in JavaScript now. You can add in a check like " if (tBox) " to ensure you have an object. The downside is the static reference to the control within the inline javascript, and you have to adjust when the calling control is in a different container, grid, panel, etc.
Check the output with View Source and you will understand what is happening. You'll have to set the OnClientClick property server-side (onload). Or find a way to bind it OnClientClick='<%#SomeProperty%>'.
Another option could be to use jQuery to find your control:
$("input:text[id*=txt_rol]")
By the way: your JavaScript won't work if someone pastes in the textbox using the mouse (right-click/paste).
This is my button:
<asp:LinkButton ID="lnkButton"
OnClientClick="showEnroll(this,true,'<%# Eval("EventId") %>'); return false"
runat="server" CommandArgument='<%# Eval("EventId") %>' />
This is the error: "The server tag is not well formed"
It means that the markup is invalid, and it's because of the inline databinding expressions. Something like this should work better:
OnClientClick='<%# string.Format("showEnroll(this, true, \'{0}\'", Eval("EventId")) %>'
Note: I have not validated the above code. It is intended to illustrate a concept, and may need tweaking.
In your binding (i.e. RowDataBound for a grid view), add the logic like this:
// Attempt to find the control
var theLinkButton = e.Row.FindControl("lnkButton") as LinkButton;
// Only try to use the control if it was actually found
if(theLinkButton != null)
{
// Grab the event ID from wherever here
// Set the OnClientClick attribute here
theLinkButton.Attributes.Add("onClientClick",
"showEnroll(this,true,'" + theEventId.ToString() + "'); return false");
}
I have Created a Asp:FileUpload control in aspx page, I try to access the Control from Javascript using this code,
in Aspx page
<asp:FileUpload ID="fileUp" runat="server" />
in Javascript
var vbsfileupload = $find("<%= fileUp.ClientID %>");
but the vbsfileupload is always null value.
Please help me to resolve this issue.
I don't believe $find is a function at all. Try selecting the element using getElementById:
var vbsfileupload = document.getElementById("#<%= fileUp.ClientID %>");
Assuming you are running this part of the script after the element has loaded, vbsfileupload should now hold the desired element.
I'm new to javascript and this is driving me nuts.
I'm attempting to set the text and color of a label ("lblerrmsg") depending upon the value of a flag ("IsValid"). I've written a function in a .js file and have attached it to web site that I built with VS.
The function - specifically getElementById('lblErrMsg') works correctly the first time it is called, but in subsquent calls it returns null. (Don't know if this is relevant - but there are no posts between calls to the function.)
Following is the relevant portion of the function:
// If IsValid is false - make the text red
var ErrMsg = document.getElementById('lblErrMsg');
if (IsValid) {
document.activeElement.style.color = 'navy';
ErrMsg.outerHTML = 'valid';
}
else {
document.activeElement.style.color = 'red';
ErrMsg.outerHTML = "*** Invalid Entry ***";
ErrMsg.style.color = 'red';
}
<asp:TextBox ID="tbNumber" runat="server"></asp:TextBox>
<asp:Label ID="lblErrMsg" runat="server" ForeColor="Red"
Text=" xxx" ></asp:Label>
ErrMsg.outerHTML = 'valid';
If you do that, you have destroyed the previous ErrMsg and the new content will not have the id anymore (so that it cannot be found by getElementById).
Are you sure you don't want innerHTML?
try to change the class name of the div or element to change the css style if you want
document.getElementById("blah").className = "cssclass";
this way you can control the css depending on the flag of yours.