Develop Reference

Check if ASP Label is visible on different page?

The current code I am working on is a mess. Currently, I have an aspx page that has some javascript and sets a tooltip for various asp:buttons that are on an ascx page (not the current aspx). It looks like this:
function setTooltips() {
$("[id*='btnSave']").mousemove(function (ev) { ButtonToolTip(ev, this, "Click to save"); });
$("[id*='btnClear']").mousemove(function (ev) { ButtonToolTip(ev, this, "Clear fields"); });
// more button tooltips set.
}
In the ascx page, I also have an asp:label. I'm creating a javascript method to display an alert based on the visibility of this label. I'm having trouble finding the control and its visibility.
Here is what the asp label code looks like:
<asp:UpdatePanel runat="server" ID="upnl_alert" UpdateMode="Always">
<ContentTemplate>
<asp:Label ID="lbl_alert" runat="server" Text="There are several issues found.<br /><br />" Visible="false" />
</ContentTemplate>
</asp:UpdatePanel>
Is there a way to check the visibility of the asp label so that I can implement the function I just wrote for the alert?
I have tried:
if (document.getElementById('lbl_alert').style.visibility == "visible")
but I am getting DOM exception - failed to execute.
Thanks in advance for the help.

have an aspx page that has some javascript and sets a tooltip for various asp:buttons that are on an ascx page (not the current aspx).
Well, not quite!!! Context here matters.
Any "user" control built and dropped into any page?
the markup, the controls, and javascript and whatever else that ascx control has? It is placed in your existing aspx page. So, no, the controls are NOT in some other page.
better to state you have a user control dropped into a existing page, and, thus I want to select/use/enjoy/hide/show or do whatever with some of the buttons that the user control has.
Like all pages, most controls will often receive the current page class, or namespace as a prefix. And keep in mind, what happens if you drag that user control 2 or 4 times into the existing page? Then what do the buttons "id" become? I mean, the buttons can't have the same id, and yet it's perfect legal to drop in the user control multiple times, and each time, it will pull into the current page that markup.
So, say a super simple user control (ascx) is like this:
code behind for this UC (button click)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs)
Me.Label1.Text =
$"control id = {Me.ClientID} <br/>
Button ID = {Button1.ClientID} <br/>
LableID = {Label1.ClientID}"
End Sub
Ok, so now lets create a new blank page, and drag + drop in the above.
We now have this:
<uc1:UserButton runat="server" id="UserButton" />
<br />
<br />
<uc1:UserButton runat="server" id="UserButton1" />
<br />
<asp:Button ID="Button1" runat="server" Text="JavaScript - get Label 1"
OnClientClick="gettest();return false"
/>
<script>
function gettest() {
// var sLbl = '<%=UserButton.ClientID + "_Label1" %>'
var sLbl = 'UserButton_Label1'
var lbl1 = document.getElementById(sLbl)
sResult = "Value of label1 in control is \n" + lbl1.innerText
alert(sResult)
}
</script>
So, since I dropped in the UC two times?
then how do the lables, and buttons get seperated out?
Simple:
The controls "inside" each control are prefixed with the "id" you give the user control, and THEN a "_" and THEN the control inside.
So, note close the js code I used:
// var sLbl = '<%=UserButton.ClientID + "_Label1" %>'
var sLbl = 'UserButton_Label1'
var lbl1 = document.getElementById(sLbl)
sResult = "Value of label1 in control is \n" + lbl1.innerText
alert(sResult)
So, when I run the above, I thus get this:
So you need to prefix the control you want inside of the ascx page with the "id" of the control name used in the CURRENT page!
That's why I stated context matters here. the ASCX page does NOT matter, what matters is the name of the "UC" control used on the current page, since WHEN such controls are dragged + dropped into a existing page, then the controls for that UC control are prefixed with the "id" of the user control.
So, to be clear:
The controls are NOT in the other page, and that's really only a consdieration and view during design time.
At run time, those ascx controls are pulled + injected + rendered in the CURRENT page. Hence you can/have to prefix the controls in that ascx page with the "id" of the UC control used when "dropping" that control into any web page you like.
User controls are fantastic, since they represent re-usable controls, but at the end of the day, such controls are rendered in the current page.

Client side data to server side

I'm trying to use a JavaScript popup box (prompt) to get some user input on my website, and then do some more actions on the server-side based on what the user does.
The popup box is, for lack of words, popping up.
The following is the code that I have tried to use for this:
<div>
<asp:HiddenField ID="hidden" runat="server" />
</div>
<script>
function userInput() {
var reason = prompt("Enter reason for deleting:", "");
//User pressed okay but didn't type anything
while (reason == "") {
//Keeps cycling until reason given or cancel is hit
reason = prompt("Enter reason for deleting:", "");
}
if (reason != "" && reason != "Code:CancelDelete") {
//User typed something and hit okay
document.getElementById('hidden').innerHTML = reason.toString();
$('#deleteReason').val(reason.toString());
$("#hidden").val(reason.toString());
}
else {
//User hits cancel
document.getElementById('hidden').nodeValue = "Code:CancelDelete";
}
}
</script>
The while loop in the script works for what I need it to do. The problem from what I can tell is trying to set the value of the HiddenField. I have tried the following ways:
innerHTML
innerText
nodeValue
While looking into this, I have seen .value used a lot and have tried it myself but when I go to type document.getElementById('hidden').value =, there is no popup option or description for .value.
I have tested the server side code and so I know that works. It all comes down to getting the user input. Either way, here is an excerpt from the c# code:
string deleteReason = hidden.Value;
//string deleteReason = test.InnerHtml.ToString();
if (deleteReason.Equals("Code:CancelDelete"))
{
}
else if (!deleteReason.Equals("Code:CancelDelete") && !deleteReason.Equals(""))
{
More or less at a loss on this one.
Update 1:
Here is the html code generated on the client side browser(Firefox) for the hidden field:
<input name="ctl00$IndividualPageContent$hidden"
id="IndividualPageContent_hidden" type="hidden">

When you type an element ID on webform, the asp.net gives it a unique ID based on some things (Your form, your repeater, etc...)
If you want to use jQuery with this ID, you can use the ClientId prop.
Something like this:
if (reason != "" && reason != "Code:CancelDelete") {
//If your server id= "hidden"
ele = $("#<%= hidden.ClientID %>");
ele.html() = reason.toString();
...
}
Another option is to add the static ID to your server element, and then your code will work as is. (the html will be rendered with ID = hidden)
ClientIDMode="static"
<div>
<asp:HiddenField ID="hidden" runat="server" ClientIDMode="static"/>
</div>

You are trying to set the value of an element with id 'hidden', but that's not the id of your hidden input.
The correct id is 'IndividualPageContent_hidden'.
Set the value like this instead:
document.getElementById('IndividualPageContent_hidden').value = 'Your value here';

Show hidden asp.net control via jquery or javascript

I have a hidden control (an asp.net label) and want to show it when a user clicks a button.
Here is the hidden control
<asp:Label ID="lblCityRequired" visible="False" runat="server" Text="Required if Country State are selected"></asp:Label>
Here is the javascript code
function showLabel()
{
$("#lblCityRequired").show();
}
function hideLabel()
{
$("#lblCityRequired").hide();
}
This only works when the label's visibility is not set to false. However I want the form to start up hiding the message. Is there something I am doing wrong? Should I just create a javascript function that starts up hiding the label via javascript?
Thanks in advance

You can hide it initally when dom is ready:
$(function(){
hideLabel();
})
Or, you can use css:
<style>#lblCityRequired{display:none;}</style>

Change labels text with javascript and read it from code behind

I have an asp.net page with a label on it. The label has no text.
<asp:Label ID="Label1" runat="server"></asp:Label>
At some point, I call a javascript function that adds some content to the label, as follows:
function myFunc() {
label = document.getElementById("Label1");
list = document.getElementById("list");
label.innerHTML = list.innerText;
}
After that function is done, I click a button on the page, that calls its onclick event:
protected void Button1_Click(object sender, EventArgs e)
{
string a = Label1.Text;
}
For some reason, the Label1.Text is still empty. Why? Is there any way I could fix this?
Thanks.

Because the value doesn't get posted to the code-behind.
No matter how much WebForms tries to hide this, the only data that gets posted from a web page to the server is data that's in form elements. What WebForms does with things like label texts is stuff them into an input type="hidden" as one big serialized base-64 encoded string. (It calls this "view state" but it's really just a hidden form element.)
Changing the page markup doesn't change anything server-side because page markup isn't posted to the server.
What you can do is create a form element and change that along with the markup. Something as simple as:
<asp:HiddenField runat="server" ID="Hidden1" />
Whenever you change the markup in JavaScript, also change that value:
label = document.getElementById("Label1");
hidden = document.getElementById("Hidden1");
list = document.getElementById("list");
label.innerHTML = list.innerText;
hidden.value = list.innerText;
This will be posted back to the server, since it's a form element. Then you can access the value server-side:
string a = Hidden1.Value;

ID="Label1" for ASP.NET is server side, but for javascript we need a client side ID ie "<%=Label1.ClientID%>"

ASP.NET hidden field not updating after postback

I have some code on my ASP page which looks like this:
<asp:UpdatePanel runat="server" id="updatepanel1" UpdateMode="Conditional" onload="updatepanel1_Load" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:HiddenField id="sendingRequest" runat="server" Value="0" />
....
</ContentTemplate>
</asp:UpdatePanel>
I also have some javascript on my page which does this, to trigger the update of the updatepanel:
var sendingRequest = document.getElementById("<%=sendingRequest.ClientID%>");
sendingRequest.value = "1";
__doPostBack('<%= updatepanel1.ClientID %>', '');
Everything works fine up to now, but in my updatepanel1_Load event, I try to set the value back to "0" :
sendingRequest.Value = "0";
This value never gets updated and set back to 0 on the client after the postback, and I can't figure out why!
Can anyone help? Thanks

If you're having problems with a hidden field, you could use a TextBox instead. Hide the textbox with css (display: none;) to achieve similar results to a hidden field. Its not exactly pretty, but its a workable workaround.

Try to call registerstartupscript or something like that from server side. I can't remember exactly the method name but its part of page object. This will register any javascript you would like to execute after postback on the client side.

This similar scenario is done here successfully:
http://encosia.com/easily-refresh-an-updatepanel-using-javascript/
Ensure you are following the same steps - I can't see all of your code. Try with a label first to make sure it gets updated as a visible control. If that works then narrow it down with your hidden value to make sure the behavior isn't different for a hidden control.

I had an issue with three HiddenFields being set in Code-Behind, but their values were not set when polled from JQuery.
My issue turned out being that my Master Page uses an UpdatePanel, and in my ASP.Net Init event I was purposing that UpdatePanel with conditional rendering.
Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
mstr = CType(Master, Site)
'setup partial rendering so Log can update asynchronously
scriptManager = CType(mstr.FindControl("ScriptManager1"), ScriptManager)
scriptManager.EnablePartialRendering = True
scriptManager.AsyncPostBackTimeout = 28800
CType(mstr.FindControl("UpdatePanel1"), UpdatePanel).UpdateMode = UpdatePanelUpdateMode.Conditional
CType(mstr.FindControl("UpdatePanel1"), UpdatePanel).ChildrenAsTriggers = False
End Sub
The issue was that I forgot to then call update on my panel after setting the HiddenFields. I had to do this because my button was a partial-postback control (UseSubmitBehaviour=False)
hfParams.Value = paramlist.ToString()
hfForms.Value = formlist.ToString()
hfStartJob.Value = "True"
CType(mstr.FindControl("UpdatePanel1"), UpdatePanel).Update()