Заполните многочисленные элементы одним и тем же классом, используя вызов ajax

Question

Для меня это совершенно новая концепция, поэтому мне очень нужна помощь. Я пытаюсь заполнить все теги классом «WorkstationCount» с помощью вызова ajax веб-службы. Я подтвердил, что веб-служба, как указано ниже, работает и возвращает правильное целое число. Тем не менее, HTML никогда не меняется. В настоящее время с кодом ниже я не получаю никаких ошибок консоли. Я уверен, что я делаю это неправильно, но я пытался:)

$('.WorkstationCount').html(function () {
    $.ajax({
        url: 'details.svc/getWorkstationCounts',
        type: 'GET',
        data: { 'packageid': $(this).attr('id') },
        dataType: 'json',
        success: function (count) {
            return count.d;
        },
        error: function (a, b, c) {
            $('.Toast').html('Error Retreiving Workstation Count!');
        }
    });
});

ПОПЫТКА УТОЧНИТЬ

 <span class="WorkstationCount" id="1"></span>
 <span class="WorkstationCount" id="2"></span>
 <span class="WorkstationCount" id="3"></span>

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

Answer 1

Ах, прочитав ваши комментарии, я вижу вашу проблему.Вы хотите отправить идентификатор для каждого элемента n данных и сделать отдельный запрос ajax для каждого WorkstationCount:

$('.WorkstationCount').each(function(i, val){
    $.ajax({
        url: 'details.svc/getWorkstationCounts',
        type: 'GET',
        data: { 'packageid': this.id },
        dataType: 'json',
        success: (function(el){
                return function (count) {
                    $(el).html(count.d);
                };
            })(this),
        error: function (a, b, c) {
            $('.Toast').html('Error Retreiving Workstation Count!');
        }
    });
});

PS this.id - более быстрый способ записи $(this).attr('id');, посколькуне полагайтесь на объект jQuery и attr()

Answer 2

Вам необходимо обновить html .WorkstationCount из функции успеха:

$.ajax({
    url: 'details.svc/getWorkstationCounts',
    type: 'GET',
    data: { 'packageid': $(this).attr('id') },
    dataType: 'json',
    success: function (count) {
        $('.WorkstationCount').html(count.d);
    },
    error: function (a, b, c) {
        $('.Toast').html('Error Retreiving Workstation Count!');
    }
});

Answer 3

Попробуйте это

$('.WorkstationCount').html(function () {
$this = $(this);
    $.ajax({
        url: 'details.svc/getWorkstationCounts',
        type: 'GET',
        data: { 'packageid': $(this).attr('id') },
        dataType: 'json',
        success: function (count) {
            $this.html(count.d);
        },
        error: function (a, b, c) {
            $('.Toast').html('Error Retreiving Workstation Count!');
        }
    });
});