Timepicker плагина Jquery не перепривязывается после переключения вкладок jquery и возврата в частичном представлении asp.net mvc
В настоящее время я работаю над отображением различных форм ввода на вкладках в asp.net mvc 3. Каждая вкладка имеет несколько дочерних частичных представлений. [Смотрите изображение ниже]
1 из частичных представлений содержит форму для создания сеансов, а над ним - еще одно частичное представление со списком созданных сеансов (еще нет). При переключении вкладок вверху и обратно плагин jquery timepicker от Francois Gelinas, известный как jquery.ui.timepicker.js не удается перепривязать / переинициализировать после выбора другой вкладки, а затем возврата на вкладку "Изменить курс и параметры программы по умолчанию".
Я использую бритвенный движок вместо стандартного веб-движка...
Главная страница / файл _Layout.cshtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>@ViewBag.Title</title>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.livequery.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.timepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-ui-1.8.11.custom.css")" type="text/css" rel="stylesheet" />
<link href="@Url.Content("~/Content/jquery-ui-timepicker.css")" type="text/css" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
Index.cshtml << вызывается кнопкой создания в главном меню приложения mvc
Это создает 3 вкладки, которые вы видите на картинке выше.
@using MvcHtmlHelpers;
<link href="@Url.Content("~/Content/BoxBackgrounds.css")" rel="stylesheet" type="text/css" />
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="tabs">
<ul>
<li >@Html.TabLink("Edit Student Defaults", "EditStudentDefaults", "Creation") </li>
<li>@Html.TabLink("Edit Exam and Certification Defaults", "EditCertAndExamDefaults", "Creation") </li>
<li>@Html.TabLink("Edit Course and Program Defaults", "EditCourseAndProgramDefaults", "Creation")</li>
</ul>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tabs").tabs({
cache: false
});
});
EditCourseAndProgramDefaults.cshtml << вкладка частичного представления с частичным представлением внутри нее.
@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
<table width="100%" class="ConfigStudentsGradient" cellspacing="0" border="0" frame="void" style="border-collapse:collapse">
<tr>
<td>
@Html.Partial("ListSessions")
</td>
<td>
@Html.Partial("ListCourses")
</td>
<td>
@Html.Partial("ListPrograms")
</td>
</tr>
<tr>
<td>
@Html.Partial("AddSession")
</td>
<td>
@Html.Partial("AddCourse")
</td>
<td>
@Html.Partial("AddProgram")
</td>
</tr>
</table>
AddSession.cshtml << частичное представление, которое использует указатель времени
@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
@using (Html.BeginForm()) {
<script type="text/javascript">
$(document).ready(function () {
$('#StartTime').timepicker({
showPeriod: true,
showLeadingZero: false
});
});
@Html.ValidationSummary(true)
<fieldset>
<legend>Session</legend>
<table>
<tr>
<td>
<span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime" }) </span>
@Html.ValidationMessageFor(model => model.SessionStartTime)
</td>
Я исследовал эту тему в течение нескольких дней. Я попробовал следующие идеи / варианты методов...
- используя живой
- используя livequery
- пытается воссоздать привязку после каждого события onclick для поля ввода
- Я попытался увидеть, как другие решили эту проблему, используя другой элемент управления, такой как datepicker, так как этот плагин очень похож на него.
Я знаю, что происходит: таймер теряет свою привязку, когда я переключаюсь обратно на вкладку. Я обнаружил, что в Firebug создан скрытый объект Timepicker, и он не умирает, когда вкладки переключаются... однако, я не могу перепривязать или вспомнить оригинальный метод для воссоздания, когда вкладка снова выбрана. Я знаю, что document.ready вызывается только 1x, когда частичное представление загружено 1-ым...
Я пытался сделать следующее: в
<script type="text/javascript">
$(document).ready(function() {
initJQueryWidgets();
});
function initJQueryWidgets() {
$("[ID$=StartTime1]").timepicker({
showPeriod: true,
showLeadingZero: false,
zIndex: 1
});
}
</script>
Я также попытался в верхней части страницы в скобках скрипта, показанных выше
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
initJQueryWidgets();
});
Затем я попытался вызвать initJqueryWidgets в обработчике onClick даже для поля ввода
<span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets" }) </span>
Я последовательно получал следующие ошибки: $("#StartTime"). Timepicker не является функцией (?)()52 (строка 2) anonymous() Создание (строка 29) [Break On This Error] $("#StartTime").timepicker({showPeriod: true, showLeadingZero: false});
3 ответа
Timepicker создает экземпляр в DOM один раз и использует этот экземпляр каждый раз, когда он отображается, за исключением встроенного отображения, поэтому вы видите его в DOM, это не означает, что он отсоединен от ввода.
Если указатель времени теперь отображается при нажатии, это, вероятно, означает, что возникла проблема с zIndex или он потерял событие click.
(document).ready(function () {
$('#StartTime').timepicker({
showPeriod: true,
showLeadingZero: false,
zIndex: 9999
});
});
Если #StartTime теряет свою привязку, вы должны удалить класс "hasTimePicker", прежде чем связывать его снова.
Сегодня вечером я расскажу о том, как реагирует средство выбора даты в этой ситуации, и заставит ли его работать также и средство выбора времени, и обновлю его, когда найду решение.
Я исправил это, удалив вызовы для загрузки других версий jquery! Проверьте вашу консоль Firebug, когда вы нажимаете на вкладки, и посмотрите, какие команды get обрабатываются. Убедитесь, что вы ссылаетесь только на 1 версию jquery! Уф! Кроме того, я обнаружил, что в частичных представлениях удаляются все ссылки на ссылки на сценарии и вставляются в главную страницу, что позволяет легче отслеживать и исправлять.
Особая благодарность Франсуа Гелинасу за то, что он выделил время, чтобы помочь, а также Операциям Черного Ящика за помощь.
Вкладки Jquery часто отключают div, содержащий элементы для каждой вкладки, когда она не просматривается. Тем не менее, если Jquery не может найти элемент, то он не может создать средство выбора даты, поэтому вам придется отключить событие при выборе вкладки, чтобы сначала проверить, существует ли элемент, а затем создать средство выбора даты. соответственно.
$('#tabs a#idOfTabContainingStartTime').bind('click', function(){
if( $("#StartTime").length ){
$('#StartTime').timepicker({
showPeriod: true,
showLeadingZero: false
});
}
}
Если это не решит вашу проблему, то это, вероятно, потому, что Jquery получает немного триггера, который доволен всей функцией tabs / div / hiding. Когда вы выбираете другую вкладку, вкладка, которую вы в данный момент просматриваете, скрыта, но Jquery также любит скрывать все внутри вкладки, поэтому вам, возможно, придется создать еще один вызов, который проверяет любые элементы, скрытые в данный момент на вкладке, и итеративно показывает их.,
$('#tabs a#idOfTabContainingStartTime :hidden').each(function(){
$(this).show();
});