Использование jQuery для динамического обновления упорядоченного списка

Question

У меня есть упорядоченный список, который выглядит следующим образом:

<div class="col-md-2 panel panel-default">
    <div class="panel-heading">Species Seen</div>
         <div class="panel-body" style="height: 350px; overflow:auto">
             <ol id="speciesAdded"></ol>
    </div>
</div>

Неупорядоченный список начинается пустым, и пользователь может добавлять элементы к нему на странице. Или он / она может нажать кнопку и создать список из записей в БД. Это часть (увлажняющая список), с которой у меня проблема. Это мой код jQuery, который выполняет вызов AJAX и пытается обновить список:

$("#refreshButton").click(function () {
    var url = "/FieldTrip/RefreshFieldTripSightingList";
    var fieldTripName = $("#FieldTripName").val();
    var accountRowId = $("#AccountRowId").val();

    /* Clear any existing list */
    $("ol#speciesAdded").empty();

    $.getJSON(url, { accountRowId: accountRowId, fieldTripName: fieldTripName }, function (data) {
        $.each(data, function (i, item) {
            $("ol$speciesAdded").appendTo("li").text(item.species);
        });
    });
});

Идет звонок AJAX, и я возвращаю предметы. Но мой упорядоченный список после очистки не обновляется элементами из БД.

Это приложение MVC 5.

Answer 1

$("ol$speciesAdded").appendTo("li").text(item.species);

селектор $ неправильно, я считаю...

// is what you wanted?
$("ol#speciesAdded").appendTo("li").text(item.species);

Кстати, если вы хотите обновить его, я бы предложил использовать empty() до.

$("ol#speciesAdded").empty();

Еще один совет, если вы используете appendTo вы будете позволять DOM обновляться каждый раз, когда добавляется новый элемент. это не очень эффективно.

попытаться получить все HTML, а затем вставить его сразу.

var items = [];

// in the loop then
items.push('<li>' + text + '</li>');

// insert all at once...
$("ol#speciesAdded").empty().html(items.join(""));

Answer 2

Там не может быть $ селектор. Вы по ошибке перепутали с jQuery и могли бы изменить свой код с:

$.each(data, function (i, item) {
    $("ol$speciesAdded").appendTo("li").text(item.species);
});

заменив $ с # Селектор идентификатора:

$.each(data, function (i, item) {
    $("ol#speciesAdded").appendTo("li").text(item.species);
});

А также, перед обновлением необходимо очистить предыдущие значения. Так сделайте так:

$("ol#speciesAdded").html("");
$.each(data, function (i, item) {
    $("ol#speciesAdded").appendTo("li").text(item.species);
});