現在、asp.net mvc 3 のタブにさまざまな入力フォームを表示する作業を行っています。各タブには、いくつかの子部分ビューがあります。[下の画像を参照]部分ビューの 1つには
セッションを作成するためのフォームが含まれており、その上には作成されたセッションのリストを含む別の部分ビューがあります (まだ作成されていません)。jquery.ui.timepicker.jsとして知られるFrancois Gelinas によるプラグインは、別のタブを選択し、[コースとプログラムのデフォルトの編集] タブに戻った後、再バインド/再初期化に失敗します。
デフォルトの Web エンジンではなく、剃刀エンジンを使用しています...
マスターページ/ファイル _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>
私はこのトピックを数日間調査しました。次のアイデア/オプション方法を試しました...
- ライブを使って
- ライブクエリの使用
- 入力フィールドの各 onclick イベントの後にバインディングを再作成しようとしています
- このプラグインはそれに非常に似ているため、datepicker のような別のコントロールを使用して、他の人がこの問題をどのように解決したかを確認しようとしました。
何が起こっているかはわかっています。タブに戻ると、タイムピッカーのバインディングが失われます。Firebug で作成された非表示の timepicker オブジェクトがあり、タブが切り替えられても死なないことを発見しました...ただし、タブが再度選択されたときに再作成する元のメソッドを再バインドまたは呼び出すことができないようです。document.ready は、部分ビューが最初にロードされたときにのみ 1x と呼ばれることを知っています...
次のことを試しました:
<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();
});
次に、入力ボックスの onClick イベント ハンドラーで initJqueryWidgets を呼び出してみました
<span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets" }) </span>
私が一貫して受け取ったエラーは $("#StartTime").timepicker is not a function (?)()52 (line 2) anonymous()Creation (line 29) [Break On This Error] $("#StartTime") でした.timepicker({showPeriod: true, showLeadingZero: false});