Обновление jquery .html не работает в Chrome

Question

У меня есть страница со списком задач, в каждой из которых есть раскрывающийся список со списком команд, на которые назначается задача, но из-за количества задач я не могу предварительно заполнить ее в действии, поскольку она замедляется вниз нумерация страниц / отображение задач довольно значительно. Поэтому вместо щелчка по раскрывающемуся списку у меня есть функция jquery, которая вызывает действие, возвращающее строку Json.

Все это прекрасно работает в Firefox, но в Chrome, когда пользователь нажимает на раскрывающийся список, выполняется вызов, но раскрывающийся список не заполняется. Пользователь должен щелкнуть мышью и снова открыть раскрывающийся список, в котором затем содержатся данные начального вызова (второго вызова нет). Данные просто добавляются в HTML, но выпадающий список не обновляется.

$("#teamsSpanFor1354405").click(function () {
    var issueId = 1354405;
    var ddl = $("#teamsSpanFor1354405").find("select.ddlTeamsAssignTask");

    if (ddl.find("option").length == 1) {
        $.ajax({
            url: '/Tracker/Task/DisplayAssignTaskToTeam',
            data: { milestoneId: 1, issueId: issueId, jsonRequest: "true" },
            type: 'POST',
            async: true,
            success: function (data) {
                console.log(data);
                var html = "<option value=''>Assign to Team</option>";
                $.each(data, function () {
                    html += "<option value='" + this.Id + "'>" + this.Name + "</option>";
                });
                console.log(html);
                ddl.html(html);
            }
        });
    }
});

@using (Ajax.BeginForm("AssignTaskToTeam", new AjaxOptions { UpdateTargetId = "assignTaskForIssue" + Model.IssueId, OnSuccess = "ConfirmAssignment(" + Model.Milestone.Id + ")" }))
{
    <input id="MilestoneId" name="MilestoneId" type="hidden" value="1"/>
    <input id="InspectorIssueId" name="InspectorIssueId" type="hidden" value="1354405"/>
    <span id="teamsSpanFor1354405">
            <select id="TeamId" class="ddlTeamsAssignTask" style="width: 125px; " name="TeamId">
                <option value="">Assign to Team</option>
            </select>
        <input class="btnAssign btnClassDisabled" type="submit" value="Assign" disabled="disabled"/>
    </span>
}

Answer 1

Как насчет этого:

<select id="selTasks">
    <option> loading...</option>
</select>

И затем, вместо события щелчка, вы связываетесь с событием mousedown, которое вызывается до того, как отобразится раскрывающийся список. Вы могли бы даже пойти так далеко, чтобы сделать вызов ajax синхронным, а не асинхронным, они могли бы видеть / чувствовать боль, но это сделало бы работу.

$(function() {

    $("#selTasks").mousedown(function () {
        if ($(this).find("option").length === 1) {
          $(this).html("<option>option one</option><option>option two</option>");  
        } 
    });
});

Другой вариант - просто использовать реализацию выпадающего списка с чем-то вроде автозаполнения jquery ui.

Тем не менее, одна из главных тенденций в производительности (я был на конференции, где некоторые люди из Google даже говорили об этом) - это выяснить намерение. Так что, если они наведут курсор мыши на выпадающий список, а затем начнут получать данные для него, так как мозгу требуется около 200 мсек, чтобы щелкнуть, за это время вы могли бы получить достаточно данных.

Answer 2

Итак, когда вы нажимаете на выпадающий список, вы делаете вызов и снова заполняете выпадающий список?Почему бы не выполнить привязку к событию onchange, а затем добавить тег, как описывает @Matt Winckler.Я использовал это для нескольких каскадных выпадающих списков, и это прекрасно работает !!!Пожалуйста, напишите, если вам нужна дополнительная инструкция по кодированию, но я уверен, что это сработает;)

Answer 3

Вы пытались использовать .append вместо .html? как:

$.each(data, function() { 
    ddl.append($('<option></option>').val(this.Id).text(this.Name));
});

По моему мнению, они оба должны работать одинаково, но, возможно, стоит попытаться изменить его, поскольку .html не ведет себя.

В качестве альтернативы, если Chrome просто отказывается обновлять раскрывающийся список при любых обстоятельствах, вы можете заменить раскрывающийся список ссылкой, а затем выполнить вызов ajax, когда пользователь нажимает на ссылку, и заменить элемент ссылки новым построил выпадающий список и открой его.

Или (возможно, более хакерский) можно встроить задержку (setTimeout во время document.ready), чтобы автоматически заполнять раскрывающийся список после загрузки страницы независимо от того, нажал ли пользователь на нее, избегая необходимости обновлять параметры после того, как выбор был уже открыт.