How to check that panel is visible or not in JavaScript?

Question

How do I check that panel is visible or not in JavaScript?. I am using ASP.NET 2.0.

Ivan Karajas · Accepted Answer · 2012-05-07T13:00:34.657

Assuming that you are setting the panel's visibility on the server-side, a check of the value returned by document.getElementById() will work, provided you ensure that you're using the the correct client ID of the panel control (don't hard-code it).

See the check in the client-side findPanel() function for a demonstration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function findPanel() {
            var panel = document.getElementById("<%= pnlMyPanel.ClientID %>");
            if (panel) {
                alert("Panel is visible");
            }
            else {
                alert("Panel is not visible");
            }

//        // And this would work too:
//        alert((<%= pnlMyPanel.Visible.ToString().ToLower() %>) ? "Panel is visible": "Panel is not visible");

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel runat="server" ID="pnlMyPanel">
            <p>
                This is a panel.</p>
        </asp:Panel>
        <asp:Button runat="server" ID="btnToggle" Text="Toggle panel visibility..." />
        <input type="button" value="Do client-side visibility check..." onclick="javascript:findPanel();" />
    </div>
    </form>
</body>
</html>

The following code in the code-behind file toggles the panel's visibility when btnToggle is clicked:

protected void Page_Load(object sender, EventArgs e)
{
    btnToggle.Click += new EventHandler(btnToggle_Click);
}

void btnToggle_Click(object sender, EventArgs e)
{
    pnlMyPanel.Visible = !pnlMyPanel.Visible;
}

I've updated my answer - keep in mind that this will see if the `Panel.Visible` is true/false, but will not take into account and jQuery effects (if applied). — Rob Cooper, May 07 '12 at 05:54
I have one question regarding this.(var panel = document.getElementById("<%= pnlMyPanel.ClientID %>")).If I write instead of above,var panel = document.getElementById(masterpage's contenplaceholderid.panelid),will it work — Jui Test, May 07 '12 at 06:46
I don't think that would work, seeing as the ContentPlaceHolderIDs don't get instantiated in the code-behind. What problem are you trying to get around there? Perhaps it might be worth posting this as another question... — Ivan Karajas, May 07 '12 at 12:54

Rob Cooper · Answer 2 · 2012-05-07T06:24:25.493

If you're using jQuery - have you tried the visible selector?

e.g:

if ($("#test").filter(":visible").length > 0) {
    /* visible */
} else {
    /* invisible */
}

This will work if the panel is hidden on the server side, and also if any jQuery (effects/transitions etc.) have fired and hidden the panel. Just checking exists or if getElementById returns something will not.

Be sure to inject the client side ID into the JavaScript and then check for :visible, this will keep your lookups fast. A la the docs:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

I have to ask you again: have you ever worked with ASP.NET web forms? — McGarnagle, May 07 '12 at 05:39
Again, you may want to think before spewing sarcasm, this would return the desired result irrespective of the the panel being hidden on the server side. If jQuery can't find the element, it's returns an empty array. Fire up a jsFiddle and see for yourself.. — Rob Cooper, May 07 '12 at 05:48

score 3 · Answer 3 · 2012-05-07T13:53:26.067

3

A simple way would be to pass the current visible value from ASP.NET to the javascript directly.

<script type="text/javascript>
   function IsPanelVisible() {
      return <%= pnlMessages.Visible.ToString().ToLower() %>
   }
</script>

edited May 07 '12 at 13:53

answered May 07 '12 at 05:58

Good point, although you would need to change it to `return <%= pnlMessages.Visible.ToString().ToLower() %>;` as JavaScript would not interpret "True" as a Boolean value (it needs to be lower case). – Ivan Karajas May 07 '12 at 13:04
@IvanKarajas That is correct, thanks. Updated to reflect the suggestion. – May 07 '12 at 13:54

score 1 · Answer 4 · edited May 07 '12 at 05:56

1

If the Visible property is false, then it will not be sent to the client at all (even hidden). ASP.NET runs that at the server side. So, you can just search for it using document.getElementById(<%= panel.ClientID %>), and if the result is empty, then it's not visible.

edited May 07 '12 at 05:56

Rob Cooper

28,567
26
103
142

answered May 07 '12 at 05:30

McGarnagle

101,349
31
229
260

The OP clearly states they are trying to do this in JavaScript. – Rob Cooper May 07 '12 at 05:35
@RobCooper wow, buddy. Ever used ASP.NET before? If a Panel (**server control**) is invisible, then Javascript cannot see it at all. – McGarnagle May 07 '12 at 05:36
Spare me the sarcasm. The OP didn't state if they had made it invisible on the server-side code. – Rob Cooper May 07 '12 at 05:40
@RobCooper OP states **Panel**. Does that sound like an HTML tag to you? – McGarnagle May 07 '12 at 05:41
But you raise a good point - they did say Panel, redacted my down-vote. – Rob Cooper May 07 '12 at 05:41
Updated my answer to show why I opted for jQuery route - just checking for exists etc won't cover bases for "I did a fadeOut" etc. – Rob Cooper May 07 '12 at 05:55

score 1 · Answer 5 · edited May 23 '17 at 12:11

1

Panel is serverside control. If its visible value is true, you can see div with the same id in page source. If its visible value is false, that panel part isn't sent to client browser at all.

One way to achieve is check its ID in javascript. In jquery, if($("#mypanel").exists()) can chek. In javascript, check this out How to check if element exists in the visible DOM?

edited May 23 '17 at 12:11

Community

1
1

answered May 07 '12 at 05:37

Jonas T

2,989
4
32
43

How to check that panel is visible or not in JavaScript?

5 Answers5