jQuery .each() AJAX

Question

The loop works. But the updating of the title does not. The alert that is commented out does show that the data is correct.

<script>
    var usercount = 0;
    var nbw = '';
    var _$this = '';
    $('.alphabet').each(function () {
        _$this = $(this);
        nbw = $(this).val();
        $.ajax({
            type: "Get",
            url: "cfc/basic.cfc?method=CountUsersByLetter&returnformat=json",
            data: "nbw=" + nbw,
            datatype: "html",
            success: function (response) {
                usercount = parseInt(response.substring(0, 10));
                //$(_$this.target).attr('title', usercount);
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('errorThrown');
            }
        });
        $(_$this.target).attr('title', usercount);
        //alert(nbw + ' usercount=' + usercount);
    });
</script>

Answer 1

Ajax is asynchronous which means the data will return at an arbitrary time in the future

You have to use the data you got from the server inside the callbacks.

The code(with several fixes):

<script>
$('.alphabet').each(function () {
    var $this = $(this);
    var nbw = $this.val();
    var usercount = 0;
    $.ajax({
        type: "Get",
        url: "cfc/basic.cfc?method=CountUsersByLetter&returnformat=json",
        data: "nbw=" + nbw,
        datatype: "html",
        success: function (response) {
            usercount = parseInt(response.substring(0, 10));
            $this.attr('title', usercount);
        },
        error: function (xhr, textStatus, errorThrown) {
            alert('errorThrown');
        }
    });
});
</script>