www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: [RESOLVED] Easy visibility question

  1. #1
    Join Date
    Dec 2008
    Posts
    21

    resolved [RESOLVED] Easy visibility question

    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!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Is the id unique? Are you setting the visibility or display property?

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Question More information please ...

    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.

  4. #4
    Join Date
    Dec 2008
    Posts
    21
    Here is my aspx page:
    Code:
    <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:
    Code:
    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;
            }
        }

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb Consider these changes ...

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

    Why not compress your JS code a bit?
    Code:
    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); }
        }

  6. #6
    Join Date
    Dec 2008
    Posts
    21
    Quote Originally Posted by Fang View Post
    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".

  7. #7
    Join Date
    Dec 2008
    Posts
    21
    Quote Originally Posted by JMRKER View Post
    I know nothing about 'asp' , so this is just a JS suggestion ...

    Why not compress your JS code a bit?
    Code:
    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

  8. #8
    Join Date
    Dec 2008
    Posts
    21
    Hmm. I changed it all, but now it's not doing anything:

    Code:
    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.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Exclamation

    Quote Originally Posted by im1dermike View Post
    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.

  10. #10
    Join Date
    Dec 2008
    Posts
    21
    That's what I did. This:
    Code:
    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'?

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Yes, give it a try.

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Giving a link to the actual page would be easier to debug.

  13. #13
    Join Date
    Dec 2008
    Posts
    21
    The page is on an Intranet site.

    I don't get it. Here is the code I have now:
    Code:
    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...

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This is wrong, only a single quote, as in the original
    Code:
    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?

  15. #15
    Join Date
    Dec 2008
    Posts
    21
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles