1

現在、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>

私はこのトピックを数日間調査しました。次のアイデア/オプション方法を試しました...

  1. ライブを使って
  2. ライブクエリの使用
  3. 入力フィールドの各 onclick イベントの後にバインディングを再作成しようとしています
  4. このプラグインはそれに非常に似ているため、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});

4

3 に答える 3

1

タイムピッカーはDOMでインスタンスを1回作成し、インライン表示を除いて表示されるたびにこのインスタンスを使用します.DOMで表示されるのはそのためです.入力から切り離されたわけではありません.

タイムピッカーがクリック時に表示されるようになった場合、おそらく zIndex に問題があるか、クリック イベントが失われたことを意味します。

(document).ready(function () {
 $('#StartTime').timepicker({
     showPeriod: true,
     showLeadingZero: false,
     zIndex: 9999
 });

});

#StartTime がバインドを失っている場合は、再度バインドする前に「hasTimePicker」クラスを削除する必要があります。


今夜、この状況で日付ピッカーがどのように反応するかを調査し、タイムピッカーでも機能するようにします。解決策が見つかったら更新します。

于 2011-03-28T10:54:19.130 に答える
1

他のjqueryバージョンをロードするための呼び出しを削除して修正しました! タブをクリックしたときに Firebug コンソールをチェックし、どの get コマンドが処理されているかを確認します。リンクする jquery のバージョンは 1 つだけにしてください。うわー!また、部分ビューではすべてのスクリプト リンク参照を削除し、マスター ページに挿入すると、追跡と修正が容易になることがわかりました。

時間を割いて支援してくれた Francois Gelinas と、支援してくれた Black Box Operations に感謝します。

于 2011-03-29T01:38:52.447 に答える
0

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();
});
于 2011-03-28T06:56:51.650 に答える