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.
spazjr01Asked:
Who is Participating?
 
ddayx10Commented:
Wow so much confusion a lot to cover.

1. Your getting a little confused with a panel's server properties syntax and availability vs the rendered html properties and syntax available in JavaScript. Its an easy mistake to make.

2. When you apply the Enabled=false to an asp:Panel control (server side) what actually happens is the disabled=disabled attribute is added to nearly all elements rendered inside the panel (including the panel itself which is a div).

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

NOTE 2: leakim's JavaScript onload function didnt work for you because it did not take into consideration all the elements that needed to have the disabled attribute removed although it was a clever effort. With a small modification you can put this on your content page and it should work<see code NOTE 2>.

3. I can see you have an issue where you only need this to load from that one particular content page and the above (NOTE 2) should deal with that. You could also modify it a little bit and incorporate it into your initial approach by attaching it to the body onload event from code behind.

When you were trying to find the "body1" element from your content page and add an attribute that likely would not find the body and so the 1st line would produce "null" and the second line would probably throw an exception... I dunno maybe it was working for you but it didnt work for me :).

Using the "findcontrol" method is generally considered a "last resort". It can be pretty resource intensive and is in general a bad habit.

So anyway if you wanted to use your initial approach combined with a modified version of leakim's code you would do the following<see Snippet Solution 2>.

4. You might find it easier all around to try using the "Page_LoadComplete" server-side event to re-enable your panel. It shouldn't fire until all the controls are loaded on the page and are bound up. The only way this would maybe be a problem is if you were using AJAX to populate your Grid.

    protected void Page_LoadComplete(object sender, EventArgs e)
    {
        pnlMyPanel.Enabled = true;
    }

****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

***<Snippet Solution 2>***

On your MasterPage Code Behind you would install a function like this:

    //You need to have the id and runat=server still set on the body tag
    public void BodyOnLoad(string att)
    {
        Body1.Attributes.Add("onload",att);
    }


On the Content Page Code Behind you would use something like this to set the Body1 attribute:

    protected void Page_Load(object sender, EventArgs e)
    {
        //Replace PnlMaster with the "classname" of your MasterPage
        //Its what comes right after "public partial class" at the top.
        ((PnlMaster)Page.Master).BodyOnLoad("EnablePanel();");
    }

And Somewhere on the .aspx "front end" of your Content Page you'd need to put the modified and renamed JavaScript function:
<script language="javascript" type="text/javascript">
    function EnablePanel() {
            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

0
 
leakim971PluritechnicianCommented:
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?
0
 
leakim971PluritechnicianCommented:
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

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
leakim971PluritechnicianCommented:
0
 
spazjr01Author Commented:
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");
0
 
leakim971PluritechnicianCommented:
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  
0
 
spazjr01Author Commented:
Still doesn't work for me, even in the panel section.  I do get the alert message, but everything else is still disabled.
0
 
ddayx10Commented:
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.
0
 
leakim971PluritechnicianCommented:
0
 
leakim971PluritechnicianCommented:
>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
0
 
ddayx10Commented:
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.
0
 
spazjr01Author Commented:
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

0
 
leakim971PluritechnicianCommented:
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.
0
 
spazjr01Author Commented:
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.
0
 
leakim971PluritechnicianCommented:
>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.
0
 
spazjr01Author Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.