asked on

How do I enable a panel of a Content page during the onload event.

I am trying to enable a panel, which contains numerous enabled radio buttons, during the onload event. The reason that I need the panel to remain disabled while the page is loading: A data grid loads after the panel loads. For slow connections, the user could potentially select one of the radio buttons. This affects the below grid in an incorrect way. So, I need the panel (or radio buttons) to be disabled until the page is completely loaded. Also, this is a content page that uses a MasterPageFile. What I’ve done so far: (1) added a javascript function “EnablePanel()” to the MasterPageFile in the script section that is empty and does nothing.
(2) added the following to the body tag of the Master page: <body id=”body1” runat=”server”>
(3) added the same javacript function to the Content page and added code to enable the panel as follows:
Function EnablePanel()
{
Var doc = document.getElementById(‘<%=pnlMyPanel.ClientID %>’);
doc.disabled = false;
}
(4) I added the following code to the Page_Load() event in order to use the onload event in the Content page:
HtmlGenericControl body = (HtmlGenericControl)Master.FindControl(“body1”);
Body.Attribute.Add(“onload”, “EnablePanel()”);

But, the panel is not enabled. I ran debugger to check the values, and the disabled property of the doc object is successfully set to “false”. But, the panel remains disabled after the page load.
I’ve also tried this with the individual radio buttons, but got the same results.
I am very new to javascript and webpage development in general. So, I need help as to what I’m doing wrong. Thanks.

leakim971

use :
var doc
instead :
Var doc

var doc = document.getElementById(‘<%=pnlMyPanel.ClientID %>’);
doc.disabled = false;

a panel is a DIV in the browser. What do you expect disabling a div?
disable all fields inside?

leakim971

Put this in head section :

<script language="javascript" type="text/javascript">
    window.onload = function () {
//        alert("going to enable all fields in two seconds!")
//        setTimeout(function() {
            var doc = document.getElementById("<%= pnlMyPanel.ClientID %>");
            var inputs = doc.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) inputs[i].removeAttribute("disabled");
            var textareas = doc.getElementsByTagName("textarea");
            for (var i = 0; i < textareas.length; i++) textareas[i].removeAttribute("disabled");
            var selects = doc.getElementsByTagName("select");
            for (var i = 0; i < selects.length; i++) selects[i].removeAttribute("disabled");
//        }, 2000)
    }
</script>

Open in new window

test page :

<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript">
    window.onload = function () {
        alert("going to enable all fields in two seconds!")
        setTimeout(function() {
            var doc = document.getElementById("<%= pnlMyPanel.ClientID %>");
            var inputs = doc.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) inputs[i].removeAttribute("disabled");
            var textareas = doc.getElementsByTagName("textarea");
            for (var i = 0; i < textareas.length; i++) textareas[i].removeAttribute("disabled");
            var selects = doc.getElementsByTagName("select");
            for (var i = 0; i < selects.length; i++) selects[i].removeAttribute("disabled");
        }, 2000)
    }
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Panel runat="server" ID="pnlMyPanel" Enabled="false">
    <asp:textbox ID="textbox1" runat="server" ></asp:textbox>
    <asp:textbox ID="textbox2" runat="server" ></asp:textbox>
    <br />
    <asp:DropDownList ID="dd1" runat="server">
        <asp:ListItem Text="One" Value="1"></asp:ListItem>
        <asp:ListItem Text="Two" Value="2"></asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="dd2" runat="server">
        <asp:ListItem Text="One" Value="1"></asp:ListItem>
        <asp:ListItem Text="Two" Value="2"></asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:textbox ID="texarea1" runat="server" TextMode="MultiLine" ></asp:textbox>
    <asp:textbox ID="texarea2" runat="server" TextMode="MultiLine" ></asp:textbox>
</asp:Panel>
</asp:Content>

Open in new window

leakim971

test :
leakim971-515661.flv

spazjr01

ASKER

I tried this, as best as I could understand it to implement it. But, it's not working. I am not fluent in javascript nor HTML. So, I need explanation, wherever possible. So, I'll start by answering your questions. Var was a typo. I have var in the code. Yes, I want the whole panel enabled (actually I have multiple panels to disable, but if I can figure out one, I think I can apply to the many) after the page load in order to enable the radio buttons contained within. If this is the wrong approach, I need to know.

My questions: When you say put this in the header section, where do you mean... the header of the Master File. If so, that will not work(I don't think). I cannot apply this to other Content pages that use the Master File. If this is not what you mean, then where do I put it in the Content page?

When does window.onload execute? For this to work, it has to execute after the page load completes.

Why the timer? I don't need a timer. I just need this function to execute when the page load is completed. I don't understand "getElementsByTagName". I don't know what the tag name is for all of the numerous radio buttons on the panel. So, what should I pass, "input"? Well, that is not working.

Why doesn't the following work?

var doc = document.getElementById(‘<%=pnlMyPanel.ClientID %>’);
doc.removeAttribute("disabled");

leakim971

Ok, if you can't put it in the head section, put the script inside the panel :

<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Panel runat="server" ID="pnlMyPanel" Enabled="false">
<script language="javascript" type="text/javascript">
    window.onload = function () {
            var doc = document.getElementById("<%= pnlMyPanel.ClientID %>");
            var inputs = doc.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) inputs[i].removeAttribute("disabled");
            var textareas = doc.getElementsByTagName("textarea");
            for (var i = 0; i < textareas.length; i++) textareas[i].removeAttribute("disabled");
            var selects = doc.getElementsByTagName("select");
            for (var i = 0; i < selects.length; i++) selects[i].removeAttribute("disabled");
    }
</script>
    <asp:textbox ID="textbox1" runat="server" ></asp:textbox>
    <asp:textbox ID="textbox2" runat="server" ></asp:textbox>
    <br />
    <asp:DropDownList ID="dd1" runat="server">
        <asp:ListItem Text="One" Value="1"></asp:ListItem>
        <asp:ListItem Text="Two" Value="2"></asp:ListItem>
    </asp:DropDownList>
    <asp:DropDownList ID="dd2" runat="server">
        <asp:ListItem Text="One" Value="1"></asp:ListItem>
        <asp:ListItem Text="Two" Value="2"></asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:textbox ID="texarea1" runat="server" TextMode="MultiLine" ></asp:textbox>
    <asp:textbox ID="texarea2" runat="server" TextMode="MultiLine" ></asp:textbox>
</asp:Panel>
</asp:Content>

Open in new window

window.onload allow you to run code when page loads completes

the timer is used by the test page to let you see the difference between (once page loads completes) and after 2 seconds, the code in run

your code don't run because :
a panel is a DIV in the browser
"disabling/enable" a div don't disable the fields inside the divs

spazjr01

ASKER

Still doesn't work for me, even in the panel section. I do get the alert message, but everything else is still disabled.

ASKER CERTIFIED SOLUTION

Member_2_4913559

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Member_2_4913559

Addendum to NOTE 2:

Leakim's code worked fine with his sample in Firefox. It works partially in IE. It doesn't work in IE for dropdowns (selects) or radiobuttonlists(specialized), etc.

The disabled=disabled attribute works in both browsers on all elements. How the inheritance is handled for the attribute is different between browsers and the elements being inherited from/to.

leakim971

IE8 :
leakim971-515778.flv

leakim971

>NOTE: Putting the disabled=disabled tag on a <div> WILL affect controls inside of it.

Not for me :
http://jsfiddle.net/TxAjv/
http://fiddle.jshell.net/TxAjv/show/

On IE8, the fields are grayed out but I can modify content
No effect on Chrome, Opera, Firefox and Safari

Member_2_4913559

It has a varying effect, some controls are affected and some are not depending.... I still suspect you havent setup a radiobuttonlist as per the original question...

Your video aside that was not the experience I had and again I suspect the code used in the "demonstration" was not adequate to show the situation.

Using your exact code in IE8 some of the items were affected and some were not. Either way we are looking for a solution. I'd rather be hearing from the user at this point or discussing why/how your code will work in a way he can understand as he was pretty confused and the direction was making it more-so.

I dont mean to make a slight and I tried not to be mean in my assessment but I was also focused on solving this thread and I gave 3 ways to do so.

spazjr01

ASKER

I chose to implement the below code. And, it works... except for when the panel is not visible. I neglected to mention that I have 4 different panels that are possibly visible (depending on selected radio buttons). It appears to work correctly for a visible panel. How do I check and only execute the disable commands for a panel that is visible. I'd like to have a solution for this within the code below (if possible), since I already have that code working.

****NOTE 2****

<script language="javascript" type="text/javascript">
    window.onload = function () {
            var doc = document.getElementById("<%= pnlMyPanel.ClientID %>");
            doc.removeAttribute("disabled");
            var inputs = doc.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) inputs[i].removeAttribute("disabled");
            var textareas = doc.getElementsByTagName("textarea");
            for (var i = 0; i < textareas.length; i++) textareas[i].removeAttribute("disabled");
            var selects = doc.getElementsByTagName("select");
            for (var i = 0; i < selects.length; i++) selects[i].removeAttribute("disabled");
            var span = doc.getElementsByTagName("span");
            for (var i = 0; i < span.length; i++) span[i].removeAttribute("disabled");            
    }
</script>

Open in new window

leakim971

when the panel is not set visible by the server side ( Visible="false" ) the panel and the content is not created on the client side so you can't do nothing.
Instead Visible="false" server side, use CSS (style.display or style.visibility) to hide it or not.

spazjr01

ASKER

All of the code (and there's is a lot - so I don't want to move it) that controls the visible attribute is already established in a C# method. How do I access this CSS property via C#? I don't see it.

leakim971

>How do I access this CSS property via C#? I don't see it.

when the panel is not set visible by the server side ( Visible="false" ) the panel and the content is not created on the client side so you can't do nothing.

spazjr01

ASKER

Thanks to both experts. However, I ended up going with the ddayx10's modified version (****NOTE 2****) of leakim's response. As far as my final question (which leakim responded to), I was able to solve this myself by including the following code for each panel:

var doc = document.getElementById("<%= myPanel.ClientID % >");
if (doc != null)
{
//do the other code that expert's provided.

}

Thanks again for both experts' help.