jQuery 和用户控件并不总是连接
jQuery and usercontrols not always connecting
我有一个包含 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。
谁能帮帮我?
您在同一元素上调用了 .datepicker()
两次。根据您的代码,第二个文本框甚至不是日期选择器。
添加$("[id=$txtCiStartDate]").datepicker()
您的控件可能嵌套在另一个容器控件中。在这种情况下,页面上呈现的 ID(即服务器端的 ClientId
属性)可能与服务器端控件 ID 不同。容器控件 ID 将与其连接。
所以不要依赖 JavaScript 代码中的控件 ID。使用方法通过其他方式获取该控件的引用。
由于您使用的是 jQuery,一种方法是查看 ID 的末尾。例如像这样 $("input[id$=txtCiStartDateF]")
。这将 select 所有 ID 以 txtCiStartDateF 结尾的控件,并且基本上是您感兴趣的控件。
还有其他方法可以 select 控制,但我希望你明白了。
我找到了我的解决方案。
在每个用户控件中,我重复代码来设置我的日期选择器。
我已将其从我的用户控件移至包含页面。
现在一切正常。
我有一个包含 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。 谁能帮帮我?
您在同一元素上调用了 .datepicker()
两次。根据您的代码,第二个文本框甚至不是日期选择器。
添加$("[id=$txtCiStartDate]").datepicker()
您的控件可能嵌套在另一个容器控件中。在这种情况下,页面上呈现的 ID(即服务器端的 ClientId
属性)可能与服务器端控件 ID 不同。容器控件 ID 将与其连接。
所以不要依赖 JavaScript 代码中的控件 ID。使用方法通过其他方式获取该控件的引用。
由于您使用的是 jQuery,一种方法是查看 ID 的末尾。例如像这样 $("input[id$=txtCiStartDateF]")
。这将 select 所有 ID 以 txtCiStartDateF 结尾的控件,并且基本上是您感兴趣的控件。
还有其他方法可以 select 控制,但我希望你明白了。
我找到了我的解决方案。 在每个用户控件中,我重复代码来设置我的日期选择器。 我已将其从我的用户控件移至包含页面。 现在一切正常。