[RESOLVED] Easy visibility question

[im1dermike]

I have a few controls I want to display client-side. I need their visibility to cascade based on drop down list selections. I start with only one DDL displayed and I want to display other controls based on user selection.

To make it so all controls except the first DDL are not visible until a selection is made, I've set the Visible property of the controls on my aspx page to false. I'm then using the following line to set the object as visible in a javascript function:

document.getElementById("control").style.visibility = "visible";

The problem is that this doesn't work if I set the Visible property of the controls on my aspx page to false. The controls never appear.

How can I fix this?

Thanks!

[Fang]

Is the id unique? Are you setting the visibility or display property?

[JMRKER]

Do you have some more code to look at
or a link to where the problem is occuring?

Should work, but there are other variables you have not listed.
For example, hopefully you have more than one "control" element.

[im1dermike]

Here is my aspx page:

<asp:Panel ID="Edit_Trigger_pnl" runat="server" BackColor="White" Visible="false" Width="550px" >
            <asp:Table ID="Table1" runat="server" HorizontalAlign="Center" BorderWidth="3"  Width="500px" BorderStyle="Groove" >
                <asp:TableRow>
                    <asp:TableHeaderCell HorizontalAlign="Left" Width="175px"><asp:Label ID="Label6" runat="server" Text="Current Schedule:" /></asp:TableHeaderCell>
                    <asp:TableCell HorizontalAlign="Left">
                        <i><asp:Label ID="Current_Trigger_Name_lbl" runat="server" /></i>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableHeaderCell HorizontalAlign="Left" Width="175px"><asp:Label ID="Label2" runat="server" Text="Frequency: " /></asp:TableHeaderCell>
                    <asp:TableCell HorizontalAlign="Left">
                        <asp:DropDownList ID="Trigger_Type_ddl" runat="server">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem>Daily</asp:ListItem>
                            <asp:ListItem>Weekly</asp:ListItem>
                            <asp:ListItem>Monthly</asp:ListItem>   
                        </asp:DropDownList>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableHeaderCell HorizontalAlign="Left" Width="175px"><asp:Label ID="Trigger_Time_lbl" runat="server" Text="Military Time:<BR>(eg 13:30 is 1:30 PM)" /></asp:TableHeaderCell>
                    <asp:TableCell HorizontalAlign="Left">
                        <asp:TextBox ID="Trigger_Time_tb" runat="server" MaxLength="5" Enabled="false" ></asp:TextBox>
                        <cc1:FilteredTextBoxExtender ID="Trigger_Time_ftb" runat="server" TargetControlID="Trigger_Time_tb" ValidChars="0123456789:" />
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableHeaderCell HorizontalAlign="Left" Width="175px"><asp:Label ID="DOTW_lbl" runat="server" Text="Days of the week: " /></asp:TableHeaderCell>
                    <asp:TableCell HorizontalAlign="Left">
                        <asp:CheckBoxList ID="DOTW_cbl" runat="server" RepeatColumns="3">
                            <asp:ListItem>Monday</asp:ListItem>
                            <asp:ListItem>Tuesday</asp:ListItem>
                            <asp:ListItem>Wednesday</asp:ListItem>
                            <asp:ListItem>Thursday</asp:ListItem>
                            <asp:ListItem>Friday</asp:ListItem>
                            <asp:ListItem>Saturday</asp:ListItem>
                            <asp:ListItem>Sunday</asp:ListItem>     
                        </asp:CheckBoxList>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableHeaderCell HorizontalAlign="Left" Width="175px"><asp:Label ID="Monthly_Frequency_lbl" Visible="false" runat="server" Text="Monthly frequency: " /></asp:TableHeaderCell>
                    <asp:TableCell HorizontalAlign="Left">
                        <asp:RadioButtonList ID="Monthly_Frequency_rbl" runat="server" Visible="false">
                            <asp:ListItem>Day of month</asp:ListItem>
                            <asp:ListItem>Day of week</asp:ListItem>
                        </asp:RadioButtonList>
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>

Here is my javascript:

function Trigger_Type_ddl_Change()
    {
        var frequency = document.getElementById("ctl00_Data_Trigger_Type_ddl").value;
        if (frequency == "Daily")
        {
            document.getElementById("ctl00_Data_Trigger_Time_tb").disabled = false;
            document.getElementById("ctl00_Data_DOTW_lbl").style.visibility = "hidden";
            document.getElementById("ctl00_Data_DOTW_cbl").style.visibility = "hidden";
            document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = false;
        }
        else if (frequency == "Weekly")
        {
            document.getElementById("ctl00_Data_Trigger_Time_tb").disabled = false;
            document.getElementById("ctl00_Data_DOTW_lbl").style.visibility = "visible";
            document.getElementById("ctl00_Data_DOTW_cbl").style.visibility = "visible";
            document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = false;
        }
        else if (frequency == "Monthly")
        {
            document.getElementById("ctl00_Data_Trigger_Time_tb").disabled = false;
            document.getElementById("ctl00_Data_DOTW_lbl").style.visibility = "hidden";
            document.getElementById("ctl00_Data_DOTW_cbl").style.visibility = "hidden";
            document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = false;
        }
        else
        {
            document.getElementById("ctl00_Data_Trigger_Time_tb").disabled = true;
            document.getElementById("ctl00_Data_DOTW_lbl").style.visibility = "hidden";
            document.getElementById("ctl00_Data_DOTW_cbl").style.visibility = "hidden";
            document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = true;
        }
    }

[JMRKER]

I know nothing about 'asp' , so this is just a JS suggestion ...

Why not compress your JS code a bit?

function _Type_ddl_Change(b1,b2,b3,b4) {
            document.getElementById("ctl00_Data_Trigger_Time_tb").disabled = b1;
            document.getElementById("ctl00_Data_DOTW_lbl").style.visibility = b2;
            document.getElementById("ctl00_Data_DOTW_cbl").style.visibility = b3;
            document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = b4;
}
function Trigger_Type_ddl_Change() {
        var frequency = document.getElementById("ctl00_Data_Trigger_Type_ddl").value;
// check for valid entry of 'frequency' value???
        if (frequency == "Daily") { _Type_ddl_Change(false,'hidden','hidden',false); }
        if (frequency == "Weekly") { _Type_ddl_Change(false,'visible','visible',false); }
        if (frequency == "Monthly") { _Type_ddl_Change(false,'hidden',hidden',false); }
        if (frequency == "Yearly") { _Type_ddl_Change(true,'hidden',hidden',true); }
    }

[im1dermike]

Is the id unique? Are you setting the visibility or display property?

Thanks Fang. That seems to be the issue. I need to switch the style.visibility="hidden" to style.display="none".

[im1dermike]

I know nothing about 'asp' , so this is just a JS suggestion ...

Why not compress your JS code a bit?

function _Type_ddl_Change(b1,b2,b3,b4) {
            document.getElementById("ctl00_Data_Trigger_Time_tb").disabled = b1;
            document.getElementById("ctl00_Data_DOTW_lbl").style.visibility = b2;
            document.getElementById("ctl00_Data_DOTW_cbl").style.visibility = b3;
            document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = b4;
}
function Trigger_Type_ddl_Change() {
        var frequency = document.getElementById("ctl00_Data_Trigger_Type_ddl").value;
// check for valid entry of 'frequency' value???
        if (frequency == "Daily") { _Type_ddl_Change(false,'hidden','hidden',false); }
        if (frequency == "Weekly") { _Type_ddl_Change(false,'visible','visible',false); }
        if (frequency == "Monthly") { _Type_ddl_Change(false,'hidden',hidden',false); }
        if (frequency == "Yearly") { _Type_ddl_Change(true,'hidden',hidden',true); }
    }

Great idea! Thanks

[im1dermike]

Hmm. I changed it all, but now it's not doing anything:

function Trigger_Type_ddl_Change()
{
    var frequency = document.getElementById("ctl00_Data_Trigger_Type_ddl").value;
    if (frequency == "Daily") { _Trigger_Type_ddl_Change('inline','inline','none','none',false); }
    if (frequency == "Weekly") { _Trigger_Type_ddl_Change('inline','inline','inline','inline',false); }
    if (frequency == "Monthly") { _Trigger_Type_ddl_Change('inline','inline','none','none',false); }
    if (frequency != "Daily" && requency != "Weekly" && frequency != "Monthly") { _Trigger_Type_ddl_Change('none','none','none','none',false); }
}
function _Trigger_Type_ddl_Change(b1,b2,b3,b4,b5)
{
        document.getElementById("ctl00_Data_Trigger_Time_lbl").style.display = b1;
        document.getElementById("ctl00_Data_Trigger_Time_tb").style.display = b2;
        document.getElementById("ctl00_Data_DOTW_lbl").style.display = b3;
        document.getElementById("ctl00_Data_DOTW_cbl").style.display = b4;
        document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = b5;    
}

How can I debug? I've used "debugger;" before, but it isn't working now.

[JMRKER]

Hmm. I changed it all, but now it's not doing anything:

...

How can I debug? I've used "debugger;" before, but it isn't working now.

Put some "test" alerts into your code to assure that you are passing the data you expect to pass.

[im1dermike]

That's what I did. This:

function _Trigger_Type_ddl_Change(b1,b2,b3,b4,b5)
    {
        alert(b1 + ';' + b2 + ';' + b3 + ';' + b4 + ';' + b5);
        document.getElementById("ctl00_Data_Trigger_Time_lbl").style.display = b1;
        document.getElementById("ctl00_Data_Trigger_Time_tb").style.display = b2;
        document.getElementById("ctl00_Data_DOTW_lbl").style.display = b3;
        document.getElementById("ctl00_Data_DOTW_cbl").style.display = b4;
        document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = b5;    
    }

Gives me this:
inline;inline;none;none;false

Could the problem be if it's setting the display property with inline rather than 'inline'?

[JMRKER]

Yes, give it a try.

[Fang]

Giving a link to the actual page would be easier to debug.

[im1dermike]

The page is on an Intranet site.

I don't get it. Here is the code I have now:

function Trigger_Type_ddl_Change()
{
    var frequency = document.getElementById("ctl00_Data_Trigger_Type_ddl").value;
    alert('frequency is: ' + frequency);
    if (frequency == "Daily") {_Trigger_Type_ddl_Change("'inline'","'inline'","'none'","'none'",'false'); }
    if (frequency == "Weekly") { _Trigger_Type_ddl_Change("'inline'","'inline'","'inline'","'inline'",'false'); }
    if (frequency == "Monthly") { _Trigger_Type_ddl_Change("'inline'","'inline'","'none'","'none'",'false'); }
    if (frequency != "Daily" && frequency != "Weekly" && frequency != "Monthly") { _Trigger_Type_ddl_Change("'none'","'none'","'none'","'none'",'false'); }
}
function _Trigger_Type_ddl_Change(b1,b2,b3,b4,b5)
{
    alert('parameters are: \nb1=' + b1 + '\nb2=' + b2 + '\nb3=' + b3 + '\nb4=' + b4 + '\nb5=' + b5);
    document.getElementById("ctl00_Data_Trigger_Time_lbl").style.display = b1;
    document.getElementById("ctl00_Data_Trigger_Time_tb").style.display = b2;
    document.getElementById("ctl00_Data_DOTW_lbl").style.display = b3;
    document.getElementById("ctl00_Data_DOTW_cbl").style.display = b4;
    document.getElementById("ctl00_Data_Edit_Trigger_Save_btn").disabled = b5;    
}

Here are the two messages I get when I select Daily:

frequency is: Daily

parameters are:
b1='inline'
b2='inline'
b3='none'
b4='none'
b5=false

So it's getting into the methods correctly with the correct parameters/values. The display lines just aren't working. Not sure what to do at this point...

[Fang]

This is wrong, only a single quote, as in the original

if (frequency == "Daily") {_Trigger_Type_ddl_Change("'inline'","'inline'","'none'","'none'",'false'); }

Where are the elements referenced by the script?
Have you set the visibility and the display properties in the css?

[im1dermike]

The elements are ASP labels, a textbox, a combo box list, and a button.

The visibility for all elements is set to false in the aspx page. This appears to be the issue. When I set the visibility property of the controls to true on the aspx page, it seems to work when I set the visibility to 'visible' and the display to 'inline'. I don't want the controls to be visible when the page loads, though.