Using jQuery to dynamically refresh an ordered list

Vote count:

0

I have an ordered list that looks as follows:

<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>

The unordered list starts out empty and the user can add items to it on the page. Or, he/she can click a button and have the list created from entries in a DB. This is the part (refreshing the list) I'm having a problem with. This is my jQuery code that makes an AJAX call and attempts to refresh the list:

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

The AJAX call is being made and I get items back. But, my ordered list, after being cleared, does not refresh with items from the DB.

This is an MVC 5 app.

asked 37 secs ago

Randy Minder

18.4k