Checking Div Visibility in ASP.NET using Javascript - javascript

How do you check if a div's visibility is hidden using JavaScript and ASP.Net?
If you look below, I am using an "if statement" to return an Alert("hi") if the div is not visible. Yet, the code is not working.
Any help is appreciated, thank you. Language is C#/JavaScript
<script>
function emptyRunReportConfirmation() {
var divDateFiltersID = document.getElementById('<%=divDateFilters.ClientID%>');
if (divDateFiltersID.style.visibility == "hidden") {
alert("hi");
}
}
</script>
<!-- this is a button to call the function -->
<asp:Button ID="buttCustomerFilt" runat="server" class="btn btn-primary" ClientIDMode="Static" Text="Run Report" OnClientClick="if ( ! emptyRunReportConfirmation()) return false;" OnClick="buttCustomerFilt_Click" /></div>
<!-- this is the div to check if visible -->
<div runat="server" id="divDateFilters" visible="false"></div>

Setting visible="false" on a runat="server" element will remove the element entirely from the page. The DIV element will not render at all. You could check your HTML to verify this.
It depends a bit on what you want to do, but in this case if you use visible="false" you can check if the variable is empty to see if the element exists.
if (!divDateFiltersID) {
alert("hi");
}

Related

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

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>

css class applying after double-click on the asp.net button

i want to apply a class on a asp.net label when validation fails, everything is working fine but it is requiring double-click to apply the class. First click to show the error message of the required field validator and second click applies the class. I need it in one click. Please help
<script>
function Validate()
{
//for textbox
if ($('#<% =RequiredFieldValidator1.ClientID %>').css('visibility') == 'visible')
{
$('#<% =Label1.ClientID %>').addClass('error');
}
else
{
$('#<% =Label1.ClientID %>').removeClass('error');
}
}
</script>
<asp:Label ID="Label1" runat="server" CssClass="lbl" Text="Name"></asp:Label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" OnClientClick="Validate()"
Text="Submit" ValidationGroup="txt" />
You need to call your Validate() function directly on the page load.
The code is currently doing exactly what you asked it to do, when the validator is visible(after first click), and button is clicked, change color.
Add code like this to call the function onload
window.onload = Validate();

Setting a panel to visible using javascript

How can I make a <asp:Panel> visible using javascript?
I have done the following but get an error (Cannot Read property style of null)
<asp:Panel runat="server" id="panNonAfricanCountries" Visible="false">
var panNonAfricaDropDown = document.getElementById("panNonAfricanCountries")
if (dropDownFirst == "Yes") {
panNonAfricaDropDown.style.visibility = "visible";
}
The Visible="false" on an asp.net control have as result to not render the control on the page.
What you try to do here is to render it, but with css style to have it hidden from the user until using javascript show it. To archive that do not use the Visible, but set a style or a css to your Panel.
<asp:Panel ID="PanelId" runat="server" Visible="true" style="visibility:hidden" >
Some Content here...
</asp:Panel>
The asp.Panel is render as div and your html on the page will probably as:
<div id="PanelId" style="visibility:hidden">
Some Content here...
</div>
and I say probably because we do not know for sure how the Id is rendered. To get it we use the PanelId.ClientID and your final javascript code will be:
var panNonAfricaDropDown = document.getElementById("<%=PanelId.ClientID%>");
if (dropDownFirst == "Yes" && panNonAfricaDropDown) {
panNonAfricaDropDown.style.visibility = "visible";
}
ASP.NET mangles the names of elements that run on the server. You will have to find the mangled name and then do document.getElementById on that name.
Alternatively, you can use the ClientIDMode property of asp:panel to turn off the mangling (http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx)

Categories