Question

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

我添加了一个执行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;
        });

部分视图是＆lt; tr>其中一个＆lt; td＆gt;的输入字段为：

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

我希望ajax接收的局部视图中的输入字段是自动完成（http://jqueryui.com/autocomplete/），以便用户能够从每个＆lt;输入＆gt;对于表格的每一行。

我似乎无法访问主视图中我的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调用的过程中是否有问题：请求部分视图，将其附加到表中，使其成为自动完成？

Answer 1

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

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

Answer 2

我最终这样做了：

    // 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 ...
            }
        });
    });

I.E。，我在AJAX之外使用.live函数绑定了自动完成。可能不是最好的方式，但到目前为止它正在按照我的意愿工作，用于多个条目。

感谢Darin Dimitrov无论如何用

指向我正确的方向

$('input.company-role-project-company', result)

在AJAX加载的局部视图（MVC4）上使用自动完成（Jquery）

2 个答案: