1

我有一个创建项目模型的视图，其中包含（除其他外）公司相关数据表。

我添加了一个执行 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 > 有一个输入字段：

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

我希望 ajax 接收的部分视图中的输入字段是自动完成（http://jqueryui.com/autocomplete/），以便用户能够从每个 < input > 的每行的一组选项中进行选择桌子。

我似乎无法在主视图中访问我的 AJAX 调用中的对应字段。我尝试在成功和完成功能上使用“filter()”和“find()”。

我可以将我的 javascript 代码放在部分视图中，但它会被复制，更不用说可能的 ID colisions =\

关于如何实现这一目标的任何想法？

编辑：

我相信我的观点中正确引用了所有内容：

@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

2

将新的部分标记附加到 DOM 后，在 AJAX 成功回调中尝试这样的操作：

$('input.company-role-project-company', result).autocomplete({
    ...
});
于 2013-02-21T14:03:37.087 回答
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 函数绑定了自动完成功能。可能不是最好的方法，但到目前为止，它可以按我的意愿工作，用于多个条目。

无论如何，感谢 Darin Dimitrov 为我指明了正确的方向

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