Question

I need help getting two pieces of data, and comparing them.

What I am trying to create here is a system for associating groups with an employee. While on the employee’s details page, the user has a button to show a popup. In this popup there is a list of groups the employee can be associated with. The list (checkbox inputs arrange as a buttonset) is populate with all groups, then I would like to have each group the employee is already associated with to be checked, so they show highlighted.

I am trying to accomplish this with the following code (but failing):

function loadAllGroups() {
var iGroupID;
var iGroupName;
$.ajax({
    type: 'POST',
    url: '../Processes/process_Groups.aspx/GetGroups',
    contentType: 'application/json; charset=utf-8',
    data: '{}',
    dataType: 'json',
    success: function (aData) {
        var AllGroups = aData.d;
        var EmployeeGroups;
        $.ajax({
            type:   'POST',
            url: '../Processes/process_Groups.aspx/GetGroupsPerEmployee',
            contentType: 'application/json; charset=utf-8',
            data: '{EmployeeID: ' + EmployeeID + '}',
            dataType: 'json',
            success:
                function (eData) {
                    EmployeeGroups = eData.d;
                },
            error:
                function (jqXHR, textStatus, errorThrown) { errorBox.append(jqXHR.responseText); } 
        });
        $.each(AllGroups, function (aIndex, aGroup) {
            var iChecked = '';
            $.each(aGroup, function (aKey, aVal) {
                if (aKey == 'GroupID') { iGroupID = aVal }
                if (aKey == 'GroupName') { iGroupName = aVal }
            });
            $.each(EmployeeGroups, function (eIndex, eGroup) {
                $.each(eGroup, function (eKey, eVal) {
                    if (eKey == 'GroupID') {
                        if (iGroupID == eVal) { iChecked = 'checked="checked"' } else { iChecked = '' }
                    }
                });
            });
        GroupsList.append('<input type="checkbox" id="Group_' + iGroupID + '" value="' + iGroupID + '" ' + iChecked + ' /><label for="Group_' + iGroupID + '">' + iGroupName + '</label>');
        });
        GroupsList.buttonsetv();
    },
    error:
        function (jqXHR, textStatus, errorThrown) { errorBox.append(jqXHR.responseText); }
});
}

I assume doing an ajax call within an ajax call is a No-No. I just don’t know how else to access the two objects of data that are returned by each ajax call, in a way to compare them.

Answer 1

Just move the inner ajax call and ‘EmployeeGroups’ variable out of first ajax call, and put it at the top after the first variable declarations. This should still accomplish the same, just without the nasty ajax inception.