1

(とりわけ) 会社関連のデータのテーブルを含む Project モデルを作成するためのビューがあります。

AJAX 呼び出しを実行して部分ビューを取得し、それをテーブルに追加するボタンを追加しました。

$("#addCompanyRoleProject").click(function () {
        cache: false,
        $.get('CompanyRoleProjectEntryRow', function (result) {

                $("#companyTable").append(result); // Add the row to the table

        }, "html").done(function (result) { 


            });

            return false;
        });

部分ビューは < tr > で、 < td > の 1 つに入力フィールドがあります。

<input class="company-role-project-company" type="text" data-containerPrefix="@ViewData["ContainerPrefix"]" />

ajax が受け取った部分ビュー内の入力フィールドをオートコンプリート ( http://jqueryui.com/autocomplete/ ) にして、ユーザーが各 < input > の各行のオプションのセットから選択できるようにしたいテーブル。

メイン ビュー内の AJAX 呼び出しで対応するフィールドにアクセスできないようです。success 関数と done 関数の両方で "filter()" と "find()" を使用してみました。

部分ビュー内に JavaScript コードを配置することもできますが、ID 衝突の可能性は言うまでもなく、複製されてしまいます =\

これを達成する方法についてのアイデアはありますか?

編集：

私の見解では、すべてが適切に参照されていると思います。

@section Scripts {
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")

    <<<< My JS code is here >>>>

}

そして、私のページのソースコードで私は見ることができます:

<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

編集2：

Darin Dimitrov のアドバイスに従い、結果をテーブルに追加した後、ajax 成功コールバックにこれを追加しました。

$('input.company-role-project-company', result).autocomplete({
    ...define source etc...
});

しかし、入力フィールドに何かを入力すると、通常のテキスト フィールドのように動作します... ajax 呼び出しを使用して、部分ビューを要求し、テーブルに追加し、オートコンプリートにするプロセスに何か問題がありますか?

4

2 に答える 2

0

私はこのようにそれをすることになった：

    // Add entry to table
    $(function () {
        $("#addItemButton").click(function () {
            cache: false
            $.get('URL.......', function (template) {
                $('#table> tbody:last').append(template);
            });
            return false;
        });
    });

   $(".the-class-used-in-the-desired-field-from-partial-view").live("click", function () {
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "URL.........", type: "GET", dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { ....... };
                        }))
                    }
                })

            },
            minLength: 1,
            select: function (event, ui) {

                ... Do some magic ...
            }
        });
    });

IE、AJAXの外部でオートコンプリートを.live関数でバインドしました。おそらく最善の方法ではありませんが、これまでのところ、複数のエントリに対して、私が望むように機能しています。

とにかく私を正しい方向に向けてくれたDarinDimitrovに感謝します

$('input.company-role-project-company', result)
于 2013-02-22T15:03:52.690 に答える