Question

This is a brand new concept to me, so I really need some help. I’m trying to populate all tags with the class “WorkstationCount” by using an ajax call to a web service. I have confirmed the webservice, as called below, is functioning and returning a proper integer. However, the HTML is never being changed. Currently with the code below I don’t receive any console errors either. I’m sure I’m doing this way wrong, but I tried 🙂

$('.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!');
        }
    });
});

ATTEMPT TO CLARIFY

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

So each span should have a different result… the ajax call is made using the element id, then it should modify the content of the span based on that result

Answer 1

Ah, after reading your comments I see your problem. You want to send along the id for each element n the data and make a separate ajax request for every 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 is a faster way of writing $(this).attr('id'); since it doesn’t rely on a jQuery object and attr()