jquery .html refresh not working on Chrome

Question

I have a page that has a list of tasks that each have a dropdown with a list of teams the task is assignable to, but due to the amount of tasks I can't pre-populate it in the Action as it slows down the pagination/display of the tasks quite significantly. So instead, on click of the dropdown I have a jquery function that calls an action returning a Json string.

All of that works fine in Firefox, but in Chrome when the user clicks on the dropdown, the call is made, but the dropdown does not populate. The user has to click away and reopen the dropdown which then has the data from the initial call (there is no second call). The data gets added just fine to the HTML, but the dropdown does not get refreshed.

$("#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

Have you tried using .append instead of .html? like:

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

In my opinion they should both work the same, but it might be worth a shot to try changing it since .html isn't behaving.

Alternatively, if Chrome just refuses to refresh the dropdown under any circumstances, you might be able to replace the dropdown with a link, then do the ajax call when the user clicks on the link and replace the link element with a newly-constructed dropdown and open it.

Or (perhaps more hackish) you could build in a delay (setTimeout during document.ready) to automatically populate the dropdown after the page had loaded regardless of whether the user clicked on it, avoiding the need to refresh the options after the select was already open.