JavaScript/jQuery Issue Using AJAX/JSON in Laravel 4

Question

I hope you can point me in the right direction with this one.

I have the following JavaScript:

var url = '/admin/list-contacts';

var contacts;

$.ajax({
    async: false,
    type: 'GET',
    url: url,
    dataType: 'json',
    success : function(data) { contacts = data; }
});

var accountId = $('#account_id option:selected').val();

if(accountId === 'NULL') {
    $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').hide();
} else {
    $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').show();
}

$('#account_id').change(function() {
    select = $("<select name='contact_id' id='contact_id'>");


    for(var i in contacts) {
        if(contacts[i]['account_id'] === $(this).val()) {
            select.append('<option value="' + contacts[i]['id'] + '">' + contacts[i]['name'] + '</option>');
        } else {
            select.html('<option value="NULL">No Contacts</option>');
        }
    }

    var accountId = $('#account_id option:selected').val();

    if(accountId === 'NULL') {
        $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').hide();
        $('.delegates .contacts .controls, .opportunities .contacts .controls, .notes .contacts .controls').html('');
    } else {
        $('.delegates .contacts, .delegates .delegate_status_id, .delegates .event_id, .delegates .price, .opportunities .contacts, .notes .contacts').show();
        $('.delegates .contacts .controls, .opportunities .contacts .controls, .notes .contacts .controls').html(select);
    }

});

Basically, what it is doing is pulling through a list of contacts via JSON with this code in Laravel 4:

public function contacts()
{
    return Contact::select('contacts.id', 'contacts.account_id', DB::raw('concat(contacts.first_name," ",contacts.last_name) AS name'))->get();
}

All good and well, the contacts variable is populated with the correct data, and I've logged the results of this variable in the console throughout the process, and it contains the correct data when a change is made to the select box. The problem is the if statement in the for loop.

If there is only 1 account with contacts in the system, it works fine and all the contacts are pulled through. As soon as you add another account, it fails and reverts to using the code in the else statement. Funny thing is, you remove the else portion of the if statement and it works flawlessly. I need the 'No contacts' bit though, to show that there are none if the account has none.

Any ideas guys?

EDIT : I should mention that the population of the contacts drop down is dependant on a previous drop down that contains the accounts in the system. The JavaScript checks for the id of the account selected and pulls through the correct contacts.

Answer 1

The issue is with the way the loop works when you have multiple values. If all the contacts match the selected account, then it's OK because the if part is the only bit that is ever executed. However, if the else part is ever executed you're removing anything added for the successful matches.

Instead of using an if else structure, I'd do the following:

for (var i in contacts) {
    if (contacts[i]['account_id'] === this.value) {
        select.append('<option value="' + contacts[i]['id'] + '">' + contacts[i]['name'] + '</option>');
    }
}

if(select.find('option').length === 0) {
    select.html('<option value="NULL">No Contacts</option>');
}

That looks through all of your contacts, finding the ones that match and adding them to your <select> element. Then, once it's examined all of the contacts, it checks to see if any were added to the <select> element - if none were, it adds a single "No Contacts" option to it.