jQuery 和用户控件并不总是连接

Question

我有一个包含 3 个用户控件的 asp.net 页面。 3 个用户控件有一个 jQueryUI-datepicker。

加载我的页面时，其中 1 个控件可见，另外 2 个不可见。

当我select在下拉菜单中输入不同的值时，显示相应的用户控件。

问题是我的日期选择器工作不正常。

日期选择器的代码：

$(function () {
    $("#txtCiStartDateF").datepicker();
    $(".needs-bdatepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-M-yy',
        altFormat: 'yy-M-dd',
        minDate: '+5d'
    });
});

<tr runat="server">
    <td><asp:Label ID="FromDateLabel" runat="server">From date:</asp:Label></td>
    <td>
        <input type="text" id="txtCiStartDateF" runat="server" class="needs-bdatepicker"/>
        <asp:TextBox id="txtCiStartDate" CssClass="hidden" runat="server" />
    </td>
</tr>

相同的代码在其他控件上，但具有不同的控件 ID。

控件之间切换的代码：

Private Sub HideAllUserControls()
    ChangeFrequency.Visible = False
    ChangeOpeningHours.Visible = False
    ChangeCiNumber.Visible = False
End Sub
Protected Sub TicketSubTypeSelected(ByVal sender As System.Object, ByVal e As EventArgs) Handles TicketSubTypeDropDownList.SelectedIndexChanged
    HideAllUserControls()

    Select Case TicketSubTypeDropDownList.SelectedItem.Value
        Case TicketSubType.ChangeFrequency
            TransportTypeRow.Visible = True
            ChangeFrequency.CiNumber = CINumberTextBox.Text
            ChangeFrequency.CustomerCode = CustomerCodeDropDownList.SelectedItem.Text
            ChangeFrequency.Visible = True
        Case TicketSubType.ChangeOpeningHours
            TransportTypeRow.Visible = True
            ChangeOpeningHours.CiNumber = CINumberTextBox.Text
            ChangeOpeningHours.CustomerCode = CustomerCodeDropDownList.SelectedItem.Text
            ChangeOpeningHours.Visible = True
        Case TicketSubType.ChangeCiNumber
            TransportTypeRow.Visible = False
            ChangeCiNumber.CiNumber = CINumberTextBox.Text
            ChangeCiNumber.CustomerCode = CustomerCodeDropDownList.SelectedItem.Text
            ChangeCiNumber.Visible = True
        Case Else

    End Select
End Sub

当我单击文本框时，日期选择器没有显示。当我在 select 从下拉列表中输入不同的值之前单击文本框时，日期选择器打开得很好。当我 select 来自下拉列表的不同值时，我没有得到日期选择器。

更新：当我第一次访问该页面时，日期选择器工作正常。我注意到我的控件有 class "hasDatepicker"。当我 select 来自下拉列表的不同值时，控件不再具有 "hasDatepicker"-class。谁能帮帮我？

Answer 1

您在同一元素上调用了 .datepicker() 两次。根据您的代码，第二个文本框甚至不是日期选择器。

添加$("[id=$txtCiStartDate]").datepicker()

Answer 2

您的控件可能嵌套在另一个容器控件中。在这种情况下，页面上呈现的 ID（即服务器端的 ClientId 属性）可能与服务器端控件 ID 不同。容器控件 ID 将与其连接。

所以不要依赖 JavaScript 代码中的控件 ID。使用方法通过其他方式获取该控件的引用。

由于您使用的是 jQuery，一种方法是查看 ID 的末尾。例如像这样 $("input[id$=txtCiStartDateF]")。这将 select 所有 ID 以 txtCiStartDateF 结尾的控件，并且基本上是您感兴趣的控件。

还有其他方法可以 select 控制，但我希望你明白了。

Answer 3

我找到了我的解决方案。在每个用户控件中，我重复代码来设置我的日期选择器。我已将其从我的用户控件移至包含页面。现在一切正常。

jQuery 和用户控件并不总是连接

jQuery and usercontrols not always connecting

jquery

asp.net

user-controls

vb.net-2010