Question

我一直在尝试将我的MVC Web应用程序从Bootstrap 3转换为4.模态部分并不容易。模态加载局部视图。之前在BS3中工作的自动完成功能仍无法正常工作。如果我使用自己的窗口浏览局部视图，它可以工作。（网站名称/区域/控制器/ _action / id）的

这是在单独的js文件中运行文档就绪函数的jquery，它打开模态并将局部视图加载到其中。

$('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
        //$('#modal-container').modal('show');
        $('#modal-container').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var url = button.attr("href");
            var modal = $(this);
            // note that this will replace the content of modal-content everytime the modal is opened
            modal.find('.modal-content').load(url);
        });        
    });

这是部分视图的一部分，在BS3中进行这项工作我必须从局部视图中引用一堆脚本，因为模态不会从完整视图继承脚本（我认为这就是原因）。

<div class="form-group">
                @Html.LabelFor(model => model.yPlayerID, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <input type="text" id="PlayerText" placeholder="@(ViewBag.Name)" autocomplete="on" style="min-width:250px" />
                </div>
            </div>

以下是局部视图中的脚本部分（注意有很多注释等因为我一直在排除故障并尝试不同的事情）：

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css">
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
    //Autocomplete on Certain Text Boxes
    //alert($("#draftID#").val());
    //$('#modal-container').on('shown.bs.modal', function () {
    //    alert("modalshowing");
    //})
    $("#PlayerText").autocomplete({
        delay: 500,
        minLength: 3,
        source: function (request, response) {
            //debugger;
            $.ajax({
                url: '/FFDraft/DraftBoard/GetPlayers',
                method: "POST",
                dataType: "json",
                data: {
                    prefix: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.name, value: item.val };
                    }))
                }
            });
        },
        select: function (event, ui) {
            // prevent autocomplete from updating the textbox
            event.preventDefault();
            //Populate Fields
            $(this).val(ui.item.label);
            $("#yPlayerID").val(ui.item.value);
        }
    });
</script>

有什么想法吗？这里可能有很多不必要的代码，因为我不是这方面的专家，一旦我得到了一些工作，我不喜欢删除它以防万一其他东西。

Jquery自动完成不能在bootstrap 4模式上工作

0 个答案: