1

最新バージョンの jQuery で Bootstrap を使用していますが、Ajax を介してページを部分的に更新した後にモーダルを表示する際に問題が発生しています。

UpdateRegister 関数が 60 秒後に実行される前に、モーダルが複数回正常に起動します。その後、ボタンをクリックしてモーダルを再度開くと、「0x800a01b6 - JavaScript ランタイム エラー: オブジェクトはプロパティまたはメソッド 'modal' をサポートしていません」というメッセージが表示されます。 .

モーダル ('#cmdAdd') を起動するボタンは、Ajax 呼び出しによって更新された Div の外にあります。

JavaScriptは以下の通りです。

$(function() {
    // Display Add Visitor modal
    $("#cmdAdd").on("click", function () {
        var url = "/Visitor/Add/";
        $.get(url, function (data) {
            $("#myModal").html(data);
            $('#myModal').modal('show');
        });
    });
    // Update register every 60 seconds
    setInterval(function () {
        UpdateRegister();
    }, 60000);
});

function UpdateRegister() {
    var currentDate = new Date();
    var day = currentDate.getDate();
    var month = currentDate.getMonth() + 1;
    var year = currentDate.getFullYear();
    var thisDate = month + "/" + day + "/" + year;

    var url = "/Visitor/RegisterList?date=" + thisDate + "&filter=current";
    $.get(url, function (data) {
        $("#RegisterList").html(data);
    });
}

HTML は次のとおりです。

<div class="row">
    <div class="col-lg-12">

        <h2>@Model.Date.DayOfWeek @Model.Date.ToLongDateString()</h2><br />

        <div class="btn-group pull-right">
            <button type="button" class="btn btn-danger" id="cmdEmergency">Emergency</button>
            <button type="button" class="btn btn-default" id="cmdAdd">Add Visitor</button>
            <button type="button" class="btn btn-default" id="cmdAddBulk">Add Bulk Visitors</button>            
        </div>

        <ul class="nav nav-tabs">
            <li class="active"><a href="#register" data-toggle="tab">Current Register <span class="label label-success" id="CountIn">@Model.VisitorsIn</span></a></li>
            <li><a href="#expected" data-toggle="tab">Visitors Expected <span class="label label-success">@Model.VisitorsExpected</span></a></li>
            <li><a href="#all" data-toggle="tab">All Visitors <span class="label label-success" id="CountTotal">@Model.TotalVisitors</span></a></li>
        </ul>

        <div class="tab-content">

            <!-- Visitors currently in the building -->
            <div class="tab-pane active" id="register">

                <br /><br />
                <div class="row">
                    <div class="col-lg-12">
                        <div id="RegisterList">
                            @Html.Action("RegisterList", new { date = Model.Date, filter="current" })
                        </div>
                    </div>
                </div>
            </div>

            <!-- Expected visitors not yet arrived -->  
            <div class="tab-pane" id="expected">
                <br /><br />
                <div class="row">
                    <div class="col-lg-12">
                        <div id="ExpectedList">
                            @Html.Action("RegisterList", new { date = Model.Date, filter="expected" })
                        </div>
                    </div>
                </div>

            </div>

            <!-- All visitors for the day -->
            <div class="tab-pane" id="all">
                <br /><br />
                <div class="row">
                    <div class="col-lg-12">
                        <div id="AllList">
                            @Html.Action("RegisterList", new { date = Model.Date, filter="all" })
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="myModal">
    <!-- Modal content goes here -->
</div><!-- /.modal -->

更新後もモーダルが機能することを確認するにはどうすればよいですか?

4

2 に答える 2

0

データを設定する#myModalと消えるだけだと思います。#RegisterListあなたはそれについてチェックしに行くべきです。

于 2013-10-03T12:36:57.227 に答える