1

ユーザーがグリッドのページサイズを持つことを可能にする Html ドロップダウンがあります。

@Html.DropDownList("PageSizes", Model.PageSizes)

それから私はjavascriptブロックを持っています:

        <script type="text/javascript">
        function ChangePageSize(size, msg) {
            alert("alert inside ChangePageSize: " + msg + " " + size); //msg = from: Initial; first dropdown change (grid updates with new page size)
                                                                       //msg = from: Initial; second dropdown  change (alert pops twice, grid does not update)
            var filterPage = "/Search/Filter";
            $.ajax({
                cache: false,
                url: filterPage,
                data: { pagesize: size },
                type: 'GET',
                success: function (data) {
                alert("success" + data);                             //this alert pops twice on the second dropdown change as well, data does have html in it.
                $('#searchResults').replaceWith(data);                       
            },
                error: function () { alert('Error changing page size.'); }
            });
        }

        $(function() {
            $('body').on('change', '#PageSizes', function() {
                var size = this.value;
                if (size != 'undefined') ChangePageSize(size, "from: Initial");
            });
        });
    </script>

これは一度だけ機能します。bind() と live() も試してみました。変更イベントに適切に再バインドする方法を知っている人はいますか?

更新: 提案どおりに JavaScript を変更し、いくつかのデバッグ アラートを追加しました。関数が再びイベントにバインドされているようです。コントローラー アクションが部分ビューを返しているようにも見えます。しかし、#searchResults DIV が再度更新されないのはなぜですか? ChangePageSize 関数が 2 回呼び出されるのはなぜですか?

Update2: グリッドが表示されない理由がわかりました。置換するように指定されている DIV は、置換後に失われます。私は指を組んで、部分ビューのテーブルを同じ名前の DIV で囲み、正しい DIV が置き換えられることを期待しました。

これは現在機能しています。私はまだ関数が複数回呼び出されていることを懸念しています。これはサーバーにも複数回ヒットしていると思います。なぜそれが起こっているのですか？

4

1 に答える 1

1

変化する

$(function() {
    $('#PageSizes').change(function () {
        var size = this.value;
        if (size != 'undefined')
            ChangePageSize(size);
    });
});

に

$(function() {
    $('body').on( "change", "PageSizes", function () {
        var size = this.value;
        if (size != 'undefined')
            ChangePageSize(size);
    });
});

そうすれば、IDがPageSizesのすべての要素に、最初のdocument.readyイベントに存在するものだけでなくイベントハンドラーが含まれるようになります。

于 2012-10-18T15:41:26.143 に答える