CODEWITHSUNDEEP
javascriptasp.net
Jui Test
Jui Test

Reputation: 2409

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

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

Upvotes: 3

Views: 22712

Answers (5)

user474407
user474407

Reputation:

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>

Upvotes: 3

Ivan Karajas
Ivan Karajas

Reputation: 1101

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;
}

Upvotes: 9

Rob Cooper
Rob Cooper

Reputation: 28867

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

Upvotes: 3

McGarnagle
McGarnagle

Reputation: 102743

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.

Upvotes: 1

Jonas T
Jonas T

Reputation: 3077

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?

Upvotes: 1

Related Questions