jQuery Автозаполнение не работает внутри ASP.NET MVC View с динамической загрузкой

Question

Я загружаю ASP.NET MVC 3 View динамически. Внутри представления есть текстовое поле, которое должно иметь «автозаполнение». Код ниже:

@model CountryViewModel

@using (Html.BeginForm("Create", "Country", FormMethod.Post)) {
@Html.ValidationSummary(true)
<div class="field">
@Html.LabelFor(model => model.Name)
@Html.TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>

<div class="field">
@Html.LabelFor(model => model.Description)
@Html.TextBoxFor(model => model.Description)
</div>

<div class="field">
    @Html.LabelFor(model => model.Latitude)
    @Html.TextBoxFor(model => model.Latitude)
</div>

<div class="field">
    @Html.LabelFor(model => model.Longitude)
    @Html.TextBoxFor(model => model.Longitude)
</div>

@Html.HiddenFor(model => model.CultureId, new { id = "CultureId" })
}

<script type="text/javascript">

$(document).ready(function () {
    $('#Name').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '@(Url.Action("GetCountriesB", "Country"))',
                data: "{ 'countryName': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item.Country
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2,
        focus: function( event, ui ) {
            $( '#Name' ).val( ui.item.Country );
            return false;
        }
   });
});

Я загружаю это представление в диалоге jQuery UI. Когда я отлаживаю с помощью Firebug, тег «script» не загружается, поэтому автозаполнение не работает.

Есть идеи, почему такое поведение?

Спасибо

Answer 1

У меня была такая же проблема, и оказалось, что z-индекс был слишком низким. Это действительно работало, но просто не показывалось.

Answer 2

Вы не должны ставить какие-либо скрипты в партиалы. Скрипты принадлежат отдельным файлам JavaScript. Они не должны смешиваться с разметкой. Поэтому поместите ваш скрипт в отдельную функцию:

function hookupAutoComplete() {
    // notice that since we have externalized this into a separate js file
    // we can no longer use url helpers here => we will fetch the url
    // from the textbox
    var url = $('#Name').data('url');
    $('#Name').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: url,
                data: JSON.stringify({ countryName: request.term }),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item.Country
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2,
        focus: function( event, ui ) {
            $( '#Name' ).val( ui.item.Country );
            return false;
        }
   });
}

, который предполагает, что URL-адрес хранится как атрибут data5 * HTML5:

@Html.TextBoxFor(model => model.Name, new { data_url = Url.Action("GetCountriesB", "Country") })

и затем при успешном обратном вызове вашего AJAX-запроса, как только вы загрузите частичное в DOM, вызовите эту функцию:

$.ajax({
    url: '/someurl',
    success: function(result) {
        $('#dialog').html(result);
        hookupAutoComplete();
    }
});

На самом деле вы можете попробовать удалить $(document).ready(...) из скрипта, и он может действительно работать, но я рекомендую вывести этот скрипт из вашей разметки.