1

ajax経由でロードされた部分ビュー要素を参照するjqueryイベントを初期化するための正しいアプローチを見つけようとしています。具体的には、bootstrap-datepicker.js をブートストラップ モーダル フォームで使用しようとしています。

背景: 日付ピッカーが機能するページが機能していました。今日のプロジェクトは、そのフォームをブートストラップ モーダルに変換することでした。私がしたことの多くは、 Bootstrap を使用した MVC 4 Edit モーダル フォームから来ました。

すべて正常に動作しています。現在、ajax を介して部分ビューを読み込んでいるため、datepicker は機能しません。私は問題を理解していますが、解決策がわかりません。アドバイスをいただければ幸いです。

呼び出し元のビューには 

<div class="modal hide fade in" id="addclassroom">
    <div id="classroom-container"></div>
<div>

<script type="text/javascript">
$(document).ready(function () {
    $('#addclassbtn').click(function () {
        var url = "/Quiz/AddClassroom?quizId=@ViewBag.quizid"; 
        $.get(url, function (data) {
            $('#classroom-container').html(data);
            $('#addclassroom').modal('show');
        });
    });
});
</script>

コントローラ： 

public ActionResult AddClassroom(int quizId)
{
    var classroom = ...
    return PartialView("_AddClassroom",classroom);
}

部分図: 

@using (Ajax.BeginForm("AddClassroom", "Quiz", FormMethod.Post,
                    new AjaxOptions
                    {
                        //InsertionMode = InsertionMode.Replace,
                        HttpMethod = "POST",
                        UpdateTargetId = "addclassroom"
                    }))
    {
        @Html.ValidationSummary()
        @Html.AntiForgeryToken()
        <div class="modal-body">
            <fieldset class="QuizDisplayFields">
                *fields...etc*
                @Html.TextBoxFor(model => model.StartDate, new {@class="datefield" })
                @Html.ValidationMessageFor(model => model.StartDate)
                *more fields...*
                <input type="submit" class = "btn btn-primary" value="Save" />
            </fieldset>
        </div>
    }

<link href="~/Content/datepicker.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-datepicker.js"></script>

   <script>
    $(document).ready(function () {
        $("#StartDate").datepicker();
    });
   </script>
   <script>
       $(function ($) {
           $("#StartDate").on("click").datepicker();
       });
   </script>
4

1 に答える 1

2

$(document).readyパーシャルでは機能しません。ページが最初にロードされたときにのみ実行されます。

したがって、パーシャル内のこれらのスクリプトを ajax 呼び出しのコールバック関数にシフトする必要があります。

于 2013-05-27T10:42:46.317 に答える