When I created a label I set it's display to none in the designer.
<asp:Label ID="label1" runat="server" style="display:none;" Text="LABEL" asp:Label>
I use javascript to turn the label visible by:
var lbl = document.getElementById('label1');
lbl.style.display="";
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
lbl.style.display="inline";
lbl.style.display="block";
just to see if the label would show up. Still nothing though. Just the extra space where the label would be is created.
You were saying
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
That makes me believe that somewhere in your CSS you may have visibility set to hidden. That normally covers the space of the element, but doesn't show it. The display controls whether or not the space is preserved for the element.
Are you certain you have the control ID correct? Unless you set ClientIDMode to Static, the actual control ID will probably be something much longer than the ID you specify. Check the control's ClientID property.
Related
I am currently attempting to change the visibility of a label when a button is clicked. The label is initially hidden and will appear after the button is clicked.
I have tried using DevEx controls and the SetVisible() function. The function works, but if the label is rendered 'display: none' via css first like I want in my situation, it does nothing.
I have also attempted to use ASP labels and change the display property on click, but once again nothing seems to happen.
Style
.dxd
{
display: none;
}
JavaScript
<script type="text/javascript">
function fncShow(s, e) {
//show devex label
lblTest.SetVisible(true);
//show ASP label
document.getElementById("lblASP").style.display = 'block';
}
</script>
Body
<dx:ASPxButton runat="server" ID="btnTest" Text="Show" Width="100px" AutoPostBack="false">
<ClientSideEvents Click="fncShow" />
</dx:ASPxButton>
<dx:ASPxLabel runat="server" ID="lblTest" Text="Test label" ClientInstanceName="lblTest" CssClass="dxd"></dx:ASPxLabel>
<asp:Label runat="server" ID="lblASP" Text="Test label 2" CssClass="dxd"></asp:Label>
I've exhausted quite a few methods trying to get either controls to work with no success. At this point, I am interested to know if it is possible to have a label invisible first, and if it is possible how it is achievable using both controls. I am new to JS so maybe I am missing something, but all examples have been fruitless. Any help would be greatly appreciated.
Turns out I was missing a few small settings to make all this come together.
On the DevEx control there is a property called ClientVisible, set that to false for the object to be initially hidden. After that, you can freely use label.SetVisible() to show and hide it.
On the ASP label, Kevin was right about the ClientIDMode needing to be set to static. Once set to static the ID wont change up, and both display and visibility properties can be changed using the document.getElementByID().style.visiblity or style.display, whichever you prefer.
I'm trying to set a label to a link to open an image.
I was using asp.net in the code behind to do this:
lblFile1.Text = "View File";
But now I need to change this to JavaScript, so when they click link the label it opens the link.
I tried this but the label doesn't even display:
document.getElementById('lblFile1').value = "View File";
I'm using <asp:Label runat="server" ID="lblFile1"></asp:Label>
The link did work when I was using it in the code behind but it's not working in JavaScript.
Change
document.getElementById('lblFile1').value
to
document.getElementById('lblFile1').innerHTML
This allows the contents of your label (an HTML span) to interpret the HTML link you place inside.
Also check your output because ASP.NET may be changing your asp:Label ID at output. Setting the ClientIDMode to "static" will solve the issue. Make sure your chosen ID doesn't conflict with any other nodes having the same ID.
I have following lable
<asp:Label ID="lblErrorMessage" runat="server" Visible="false" ForeColor="Red" CssClass="ControlWidth"></asp:Label>
Which is visible false. On button Save if there is any error on page I make it visible and show error msg.
On Cancel button I am clearing the text of this lable thorugh Javascript as
var lblErrorMessage = document.getElementById('<%=lblErrorMessage.ClientID%>');
lblErrorMessage.innerHTML = "";
lblErrorMessage.innerText = "";
But when I do some other opration on page that time page get postback and error message
Which I have cleared get visible.
Can anyone tell me how I can make label Visible false through javascript and which should
not get visible on postback.
If you want to avoid this problem altogether, have your cancel button do a postback and clear the label values and set its visibility to false again fron the server side as opposed to doing it from the client side. The reason this is happening is because even though you clear the label innerText and innerHtml with javascript; the ViewState still contains the old values so when you post back; it recovers those values.
If you think you can leave without ViewState being enabled for the wrror label, you could disable it and the problem will go away; for example:
<asp:label id="errorlabel" EnableViewState="false" />
I am using javascript in an asp.net page where I am also using html textarea to get the text from users.
I want to store that text in the asp:TextBox below and set the visibility of that textbox to "false"..
The problem arises as I use the hidden textbox to store the value , my javascript is not working, and as I set the visibility to "true" it starts working again. but i didn't want to show textbox..
I included the textbox as:
<asp:TextBox ID="txtboxhead" runat="server" Visible="false"></asp:TextBox>
and i use javascript as:
document.getElementById('txtareahead').readOnly = true;
text = document.getElementById('txtareahead').value;
document.getElementById('<%= txtboxhead.ClientID %>').value = text;
how this problem can be solved..
please help me out..
The reason your javascript can not access the textbox when the visibility is set to false is because it simply doesn't exist.
This is because the server is processing the request and because it is set to false it doesn't render it to the page. What you want to do is to change the style of the textbox so it is hidden.
Eg below,
<div style="display:none">
<asp:TextBox ID="txtboxhead" runat="server"></asp:TextBox>
</div>
This way your script will still run and the users will not be able to see the textbox.
HTH
Sounds like what you really want is an <asp:HiddenField> it won't display on the page, but you'll be able to change its contents using javascript.
All I want to make user control visible on button click. I am getting object null typical error on following code. How do I make complete user Control visible or invisible using javascript?
Dim ucAddNewChekcing As SubscriberSetupPages_UserControls_CheckingAccount
ucAddNewChekcing = DirectCast(pnlTopLevel.Items().FindItemByValue("pnlAddChecking").FindControl("CheckingAcct1"), SubscriberSetupPages_UserControls_CheckingAccount)
Dim openWinScript As String = "SetVisibility('" & ucAddNewChekcing.ClientID & "');"
btnAddChecking.OnClientClick = openWinScript
Thanks in advance.
have visible="false" set means your control doesn't get rendered at all, so there's no element available when you want to display it. you can address this in a couple ways:
leave the control visible, so it renders, and use css styling to hide it until you want it: style="display: none;" in place of visible="false".
change visible to true and set style="display: none;" on some wrapping element (see edit below).
in your SetVisibility function, you can do
element.style.display = '';
to remove the none value and show the element.
edit: ok after thinking about this some more, we can't put style="display: none;" right in the user control tag because that doesn't map to any specific html element. instead, this needs to be set on an element that wraps the contents of the user control.
if the user control has such an element already, that would be a good place to set the display styling. you can add a method to the control that will return the ClientID for that element so you can reference it in script.otherwise if your layout will tolerate it you can put the control inside an asp:Panel and set the display property there.
the other option is to wrap your control in an UpdatePanel containing some control (like HiddenField) as a flag which will indicate if the control is visible or not. if you go that route you SetVisibility function looks something like
// change value on flag control
hiddenControl.value = '1';
// trigger a partial postback
__doPostBack('UpdatePanel1', '');
and then in your UpdatePanel_Load function you can check the value of your flag control and set the Visible property on your user control accordingly.