Я применяю указатели даты jquery к динамическим элементам управления, которые следуют за классом jq-datepicker
. Просто настройте пример jsfiddle, чтобы продемонстрировать средство выбора даты выпуска с модальным
. Пожалуйста, нажмите на ссылку, чтобыследуйте демонстрации
, когда я не включил модальный, тот же код работал нормально, вот еще один пример работы демо без модального
пожалуйста, нажмите на ссылку, чтобы перейти к демонстрации
Сценарий: у меня есть фрагмент кода, который выполняет вызов ajax, и определенный div обновляется, когда возвращается ответ от вызова ajax
<html>
<body>
<div class="content-wrapper">
@RenderBody()
<div class="jq-loading-bar"></div>
<div id="ajax-place-holder" style="width:100%; height:100%;"></div>
</div>
</body>
</html>
ниже приведен фрагмент кодаВозвращенный ajax-вызовом, выполненным для определенного метода действия
<div id="ajax-place-holder" style="width:100%; height:100%;">
<div class="modal fade show" id="myModal" style="padding-right: 21px; display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<form action="/profile/updateeducation" class="jq-form" method="post" novalidate="novalidate">
<label for="placeholder-input" class="col-sm-12 col-form-label text-center">ADD EDUCATION</label>
<hr>
<div class="form-group row">
<label class="col-sm-12 col-form-label" for="SelectedAcademicLevel">Academic Level</label>
<div class="col-sm-12">
<select class="form-control" data-val="true" data-val-required="academic level required" id="SelectedAcademicLevel" name="SelectedAcademicLevel">
<option value="">Select Academic Level</option>
<option value="1">UPSR</option>
<option value="2">PT3/PMR</option>
<option selected="selected" value="3">SPM</option>
<option value="4">Matrikulasi</option>
<option value="5">STPM</option>
<option value="6">STAM</option>
<option value="7">SKM</option>
<option value="8">Diploma</option>
<option value="9">Advance Diploma</option>
<option value="10">Bachelor</option>
<option value="11">Master</option>
<option value="12">PHD</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="SelectedAcademicLevel" data-valmsg-replace="true"></span>
</div>
<label class="col-sm-12 col-form-label" for="AcademicDetailItem_courseTitle">Course Title</label>
<div class="col-sm-12">
<input class="form-control" data-val="true" data-val-length="couse title should be min 10 and max 70 in length" data-val-length-max="70" data-val-length-min="10" data-val-regex="First name should contain alphabets, white spaces or characters in [-_'. (repeating one at a time)] only." data-val-regex-pattern="^[a-zA-Z][a-zA-Z0-9]*([ '\-_\.]{1}[a-zA-Z0-9]+)*$" data-val-required="course title is required" id="AcademicDetailItem_courseTitle" name="AcademicDetailItem.courseTitle" placeholder="Enter Course Title" type="text" value="Computer Engineering">
<span class="field-validation-valid text-danger" data-valmsg-for="AcademicDetailItem.courseTitle" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-12 col-form-label" for="SelectedAcademicDiscipline">Academic Discipline</label>
<div class="col-sm-12">
<select class="form-control" data-val="true" data-val-required="academic discipline required" id="SelectedAcademicDiscipline" name="SelectedAcademicDiscipline">
<option value="">Select Academic Discipline</option>
<option value="1">Anthropology</option>
<option value="2">Applied sciences</option>
<option selected="selected" value="3">Archaeology</option>
<option value="4">Arts</option>
<option value="5">Biology</option>
<option value="6">Chemistry</option>
<option value="7">Computer Science</option>
<option value="8">Earth sciences</option>
<option value="9">Economics</option>
<option value="10">Engineering and technology</option>
<option value="11">Formal sciences</option>
<option value="12">History</option>
<option value="13">Human geography</option>
<option value="14">Humanities</option>
<option value="15">Languages and literature</option>
<option value="16">Law</option>
<option value="17">Mathematics</option>
<option value="18">Medicine and health</option>
<option value="19">Natural sciences</option>
<option value="20">Performing arts</option>
<option value="21">Philosophy</option>
<option value="22">Physics</option>
<option value="23">Political science</option>
<option value="24">Psychology</option>
<option value="25">Social sciences</option>
<option value="26">Sociology</option>
<option value="27">Space sciences</option>
<option value="28">Statistics</option>
<option value="29">Theology</option>
<option value="30">Visual arts</option>
<option value="31">Other</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="SelectedAcademicDiscipline" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group row">
<label for="placeholder-input" class="col-sm-12 col-form-label text-center">Duration from to until</label>
</div>
<div class="form-group row">
<label class="col-sm-12 col-form-label" for="AcademicDetailItem_durationFrom">Starting Date</label>
<div class="col-sm-12">
<input class="form-control jq-datepicker hasDatepicker" data-val="true" data-val-date="The field Starting Date must be a date." data-val-required="Starting date is Required" id="AcademicDetailItem_durationFrom" name="AcademicDetailItem.durationFrom" placeholder="Enter Date From" type="text" value="15/11/2018">
<span class="field-validation-valid text-danger" data-valmsg-for="AcademicDetailItem.durationFrom" data-valmsg-replace="true"></span>
</div>
<label class="col-sm-12 col-form-label" for="AcademicDetailItem_durationUntil">Completion Date</label>
<div class="col-sm-12">
<input class="form-control jq-datepicker hasDatepicker" data-val="true" data-val-date="The field Completion Date must be a date." data-val-required="Completion date is Required" id="AcademicDetailItem_durationUntil" name="AcademicDetailItem.durationUntil" placeholder="Enter Date Completion" type="text" value="26/11/2018">
<span class="field-validation-valid text-danger" data-valmsg-for="AcademicDetailItem.durationUntil" data-valmsg-replace="true"></span>
</div>
</div>
<!---<button type="button" id="addMore1" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-plus"></span> Add More
</button>-->
<br>
<div class="card-body text-center">
<input data-val="true" data-val-number="The field individualID must be a number." data-val-required="The individualID field is required." id="AcademicDetailItem_individualID" name="AcademicDetailItem.individualID" type="hidden" value="2">
<input data-val="true" data-val-number="The field individualAcademicQualificationDetailID must be a number." data-val-required="The individualAcademicQualificationDetailID field is required." id="AcademicDetailItem_individualAcademicQualificationDetailID" name="AcademicDetailItem.individualAcademicQualificationDetailID" type="hidden" value="5">
<a href="/profile/edit" class="jq-loader" data-jq-action="DismissModal">
<button type="button" class="btn btn-sm btn-secondary shadow-secondary px-5" value="Cancel">Cancel</button>
</a>
<button type="submit" class="btn btn-sm btn-primary shadow-primary px-5 jq-loader" value=""><span> Save </span></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
, ниже приведены изображения среды, откуда я скопировал код, представленный с помощью ajax-вызова.этот код выполняется как загрузочное модальное всплывающее окно, но все еще существует как часть div ajax-place-holder, которое существует на странице при визуализации первой страницы.
Снимок кода, выполняющегося как модальное всплывающее окно, возвращаемое вызовом ajax
Снимок инструментов отладки Chrome
и вот код JavaScript последней части, который применяет средства выбора даты к динамически создаваемым элементам, возвращаемым вызовом ajax.
<script type="text/javascript">
$('body').on('focus', ".jq-datepicker", function () {
////debugger;
console.log('body focus jq-datepciker');
$(this).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:-0",
numberOfMonths: 1,
dateFormat: "dd/mm/yy",
showWeek: true,
});
$(this).datepicker("show");
});
</script>
эта функция вызывается каждый раз, когда любой элемент ввода с классом jq-datepicker получает фокус, а код вызывается и выполняется без каких-либо ошибок в консоли.
ниже приведен снимок консоли каждый раз при вводе элемента с тем же классомполучает фокус.
Журнал консоли каждый раз, когда ввод получает фокус
, но я не могу получить какой-либо указатель даты с моим пользовательским интерфейсом.
Все показанные снимкивыше из Google Chrome.
теперь проблема становится еще более интересной, когда я запускаю тот же код в Internet Explorer, он, кажется, работает иDatePicker отображает нормально при получении фокуса для элемента ввода, ниже снимок экрана из Internet Explorer
снимок из Internet Explorer
DatePicker работает нормально для Internet Explorer, но это не такt работает с Chrome или Firefox. Я перепробовал все, что мне известно, с моими ограниченными знаниями, но я не могу понять, как решить эту проблему, пожалуйста, помогите