jQuery и usercontrols не всегда подключаются

Question

У меня есть страница asp.net, которая имеет 3 пользовательских элемента управления. У 3 пользовательских контроллеров есть jQueryUI-datepicker.

Когда моя страница загружена, 1 из элементов управления виден, другие 2 - нет.

Когда я выбираю в выпадающем меню другое значение, отображается соответствующее пользовательское управление.

Проблема в том, что мой датпикер работает неправильно.

Код для DatePicker:

$(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> 

Тот же самый код на другие элементы управления, но с другим идентификатором управления.

Код для переключения между элементами управления:

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 

Когда я нажав на текстовое поле DatePicker не отображающее. Когда я нажимаю текстовое поле до того, как вы выбрали другое значение из раскрывающегося списка, функция datepicker открывается просто отлично. Когда я выбираю другое значение из раскрывающегося списка, я не получаю datepicker.

Обновление: когда я впервые попал на страницу, функция datepicker работает нормально. Я заметил, что мой элемент управления имеет класс «hasDatepicker». Когда я выбираю другое значение из раскрывающегося списка, у контроллера больше нет класса hasDatepicker. Может ли кто-нибудь мне помочь?

Answer 1

Я нашел свое решение. В каждом usercontrol я повторил код, чтобы установить мой datepicker. Я переместил это из моего usercontrols на содержащую страницу. И теперь все работает нормально.

Answer 2

Вы звоните .datepicker() дважды на тот же элемент. Второе текстовое поле - это не даже датапикер в соответствии с вашим кодом.

Добавить $("[id=$txtCiStartDate]").datepicker()

Answer 3

Элемент управления, вероятно, вложенный в другой элемент управления контейнера. В таких случаях идентификатор, отображаемый на странице (т. Е. ClientId свойство на стороне сервера), может не совпадать с идентификатором управления на стороне сервера. Идентификатор управления контейнером будет соединен с ним.

Поэтому не используйте идентификатор элемента управления в своем JavaScript-коде. Используйте способы, чтобы получить ссылку на это управление другими способами.

Поскольку вы используете jQuery, один из способов - посмотреть на конец ID. например как это $("input[id$=txtCiStartDateF]"). Это позволит выбрать все элементы управления, у которых есть идентификатор, заканчивающийся на txtCiStartDateF, и будет в основном контролировать ваш интерес.

Есть и другие способы выбора элемента управления, но я надеюсь, что вы поняли суть.