locked
ASP.net, C#, Javascript, Downdownlist, Only want to show when it has more than one in the list RRS feed

  • Question

  • User1045460610 posted

    My dropdownlist works but I only want it to show when there's more than one row in the list. What's a way to do that?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="instructorcourse.aspx.cs" Inherits="updatecourses" %>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head3" runat="server">
    <title>On Grounds</title>
    <style type="text/css">
    .auto-style1 {
    width: 30px;
    }

    .auto-style2 {
    width: 132px;
    }

    .auto-style5 {
    width: 24px;
    }
    .auto-style7 {
    width: 140px;
    height: 26px;
    }
    .auto-style8 {
    width: 24px;
    height: 26px;
    }
    .auto-style9 {
    width: 273px;
    }
    .auto-style10 {
    width: 123px;
    }
    .auto-style11 {
    width: 123px;
    height: 26px;
    }
    .auto-style12 {
    /*width: 140px;*/
    }
    </style>
    </head>
    <body>
    <%--<script>JavaScript is Active</script>
    <noscript>JavaScript is Disabled</noscript>--%>
    <form id="form3" runat="server">
    <h2 class="auto-style9">
    <asp:Image ID="Image1" runat="server" Height="103px" Width="216px" ImageUrl="~/headerLogo.png" />
    </h2>
    <h2 class="auto-style13">Attendance</h2>
    <h2>Intructor - Next Course</h2>
    <table>
    <tr>
    <td class="auto-style10">Insctructor ID:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtInstructorID" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style5"></td>
    </tr>
    <tr>
    <td class="auto-style11">Instructor Name:</td>
    <td class="auto-style7">
    <asp:TextBox ID="txtInstructorName" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style8"></td>
    </tr>
    <tr>
    <td class="auto-style10">Course Code:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtCourseCode" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style5">&nbsp;</td>
    </tr>

    <tr>
    <td class="auto-style10">Course Title:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtCourseTitle" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style5">
    <select name="DropDownList1" id="DropDownList1" onchange="changeCourse(event)">
    </select> <%--on change, populates text boxes with result--%>
    </td>

    </tr>

    <tr>
    <td class="auto-style10">Course StartTime:</td>
    <td class="auto-style12">
    <asp:TextBox ID="txtStartTime" runat="server" Enabled="False"></asp:TextBox></td>
    </tr>


    <tr>
    <td class="auto-style10">Attendance Code: </td>
    <td class="auto-style12">
    <asp:TextBox ID="txtAttendanceCode" runat="server" ToolTip="Use the System Generated Random Code or click the Code Button to Generate a New Code, Youn can alsto Enter Your Own Code!"></asp:TextBox>
    </td>
    <td class="auto-style5">
    <asp:Button ID="btnGenerateCode" runat="server" OnClick="BtnGenerateCode_Click" Text="Code" />
    </td>
    </tr>


    </table>
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Save Code" OnClick="btnAdd_Click" />
    <br />
    <br />
    <asp:Button ID="btnHelp" runat="server" Text="?" ToolTip="Instructions/Notes: You can use the system generated code or create your own. We recommend that it is user-friendly. All codes are unique to this course. Click Save Code to capture the attendance code for this course session. Students must be in this class and on the wireless network to post their attendance. If students do not have a smartphone or laptop, you can allow them to log in to the podium. " />
    <br />
    <br />
    <asp:Label ID="lblMsg3" runat="server" EnableViewState="False"></asp:Label>
    <br />
    <asp:Panel ID="Panel1" runat="server" Width="267px">
    <%--<br />
    Instructions/Notes:
    <br />
    -You can use the system generated code or create your own. We recommend that it is user-friendly.
    <br />
    -All codes are unique to this course.
    <br />
    -Click Save Code to capture the attendance code for this course session.
    <br />
    -Students must be in this class and on the wireless network to post their attendance.
    <br />
    -If students do not have a smartphone or laptop, you can allow them to log in to the podium.--%>
    </asp:Panel>
    <asp:Label ID="lblMsg2" runat="server" EnableViewState="False"></asp:Label>
    <br />
    <asp:Label ID="lblMsg4" runat="server" EnableViewState="False"></asp:Label>
    <br />
    <br />
    <table>
    <tr>
    <%--<td class="auto-style4">Record ID: </td>--%>
    <td class="auto-style2">
    <asp:TextBox ID="txtRecordID" runat="server" Enabled="False" Width="266px"></asp:TextBox> <%--If not visable unable to set value--%>
    </td>
    <td class="auto-style1">
    <%--&nbsp;will select next course on form load, by hostid, will go in form load</tr>--%>

    </table>
    <br />
    <br />
    </form>
    <script type="text/javascript">
    function load() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('post', 'instructorcourse.aspx/GetCourseTitles', true);
    xhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.onreadystatechange = function () {
    if (xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) {
    var $titlesDropDown = document.getElementById('DropDownList1'),
    courses = JSON.parse(JSON.parse(this.responseText).d),
    html = '';
    //courses.forEach(function (course) {
    // var value = course.RecordID + '|' + course.CourseCode + '|' + course.Title;
    courses.forEach(function (course) {
    var value = course.RecordID + '|' + course.CourseCode + '|' + course.Title + '|' + course.StartTime;
    html += '<option value="' + value + '">' + course.Title + '</option>';
    });
    $titlesDropDown.innerHTML = html;
    }
    };
    xhttp.send(JSON.stringify({ instructorId: '<%=txtInstructorID.Text%>' }));
    }
    document.addEventListener('DOMContentLoaded', load);

    function changeCourse(e) {
    //var temp = e.target.value.split('|'),
    // //recordID = parseInt(temp[0]),
    // recordID = temp[0],
    // courseCode = temp[1],
    // title = temp[2];
    var temp = e.target.value.split('|'),
    //recordID = parseInt(temp[0]),
    recordID = temp[0],
    courseCode = temp[1],
    title = temp[2],
    startTime = temp[3];
    <%--document.getElementById('<%=nameof(txtInstructorID)%>').value = recordID;--%>
    document.getElementById('<%=nameof(txtRecordID)%>').value = recordID;
    document.getElementById('<%=nameof(txtCourseCode)%>').value = courseCode;
    document.getElementById('<%=nameof(txtCourseTitle)%>').value = title;
    //document.getElementById('<%=nameof(txtStartTime)%>').value = startTime;
    document.getElementById('<%=nameof(txtStartTime)%>').value = new Date(startTime).toLocaleDateString() + ' ' + new Date(startTime).toLocaleTimeString();
    }
    </script>
    </body>
    </html>

    Tuesday, April 16, 2019 4:38 PM

Answers

  • User839733648 posted

    Hi Tom4IT,

    My dropdownlist works but I only want it to show when there's more than one row in the list.

    Do you mean that if the option values are empty or there is only one value, you want to hide the dropdownlist?

    If it is, it is easy to achieve. I suggest that you could check the length of the dropdownlist value and then hide it.

    if ($("#DropDownList1 option[value!='']").length == 0 || $("#DropDownList1 option[value!='']").length == 1) {
        $("#DropDownList1").hide();
    }

    If you do not mean hiding the dropdownlist, please describe your requirement more in details.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 17, 2019 5:57 AM

All replies

  • User839733648 posted

    Hi Tom4IT,

    My dropdownlist works but I only want it to show when there's more than one row in the list.

    Do you mean that if the option values are empty or there is only one value, you want to hide the dropdownlist?

    If it is, it is easy to achieve. I suggest that you could check the length of the dropdownlist value and then hide it.

    if ($("#DropDownList1 option[value!='']").length == 0 || $("#DropDownList1 option[value!='']").length == 1) {
        $("#DropDownList1").hide();
    }

    If you do not mean hiding the dropdownlist, please describe your requirement more in details.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 17, 2019 5:57 AM
  • User1045460610 posted

    Thanks, How do I use that code in my asp.net page on this line ?

    <select name="DropDownList1" id="DropDownList1" onchange="changeCourse(event)">

    Wednesday, April 17, 2019 1:39 PM
  • User839733648 posted

    In my opinion, you may not add the onchange event. 

    After you add the options to the <select>, you could check that if the dropdownlist's length is correct.

    I make a sample to simulate adding different amounts of options.

        <script>
            $(function () {
                var selectValues = {
                    "1": "test 1",
                    "2": "test 2"// if there is only one or no values, when loadin the page, it will hide
                };
                var $mySelect = $('#DropDownList1');
                $.each(selectValues, function (key, value) {
                    var $option = $("<option/>", {
                        value: key,
                        text: value
                    });
                    $mySelect.append($option);
                });
                if ($("#DropDownList1 option[value!='']").length == 0 || $("#DropDownList1 option[value!='']").length == 1) {
                    $("#DropDownList1").hide();
                }
            })
        </script>
    <select name="DropDownList1" id="DropDownList1"></select>

    Best Regards,

    Jenfier

    Tuesday, April 23, 2019 7:11 AM