Select Cascade Using jQuery and PHP in Laravel 4

Question

I'm trying to populate a select box based on a previous select box value in Laravel 4. Here's what I have so far:

My JS:

var url = document.location.hostname + '/cream/public/list-contacts';

var contacts;

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

$('#account_id').change(function() {
    alert(url);
    label = "<label class='control-label'>Contacts</label>";
    select = $("<select name='contact_id[]' id='contact_id'>");
    console.log(contacts);

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

    $('.contacts').html(select).prepend(label);
});

My list-contacts route declaration:

Route::get('list-contacts', 'ContactListController@contacts');

My contacts() method in my ContactListController:

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

The form in my view:

{{ Form::open(array('action' => 'DelegatesController@store', 'class' => 'view-only pull-left form-inline')) }}
    {{ Form::label('account_id', 'Account', array('class' => 'control-label')) }}
    {{ Form::select('account_id', $accounts) }}
    <div class="contacts"></div>
    {{ Form::label('delegate_status_id', 'Status', array('class' => 'control-label')) }}
    {{ Form::select('delegate_status_id', $delegate_statuses) }}
    {{ Form::label('price', 'Price', array('class' => 'control-label')) }}
    {{ Form::text('price', '', array('class' => 'input-small')) }}
    {{ Form::hidden('event_id', $event->id) }}
    {{ Form::submit('Add Delegate', array('class' => 'btn btn-success')) }}
{{ Form::close() }}

EDIT: I've modified my code above. When I visit /list-contacts it gets the correct data I need, it's just not assigning that data to the contacts variable in my AJAX request in my JS? Any help would be appreciated.

Error: This is the error that is shown in my console log for the contacts variable:

file: "/Applications/MAMP/htdocs/cream/vendor/laravel/framework/src/Illuminate/Routing/Controllers/Controller.php" line: 290 message: "" type: "Symfony\Component\HttpKernel\Exception\NotFoundHttpException"

Answer 1

I now have this working. It was to do with the generated URL in the AJAX request. I removed the document.location.hostname and hard coded the url without localhost.

Here's the working code for those interested:

My JS:

var url = '/cream/public/list-contacts';

var contacts;

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

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

    $('.delegates .contacts').show();

    $('.delegates .contacts .controls').html(select);
});

My list-contacts route declaration:

Route::get('list-contacts', 'ContactListController@contacts');

My contacts() method in my ContactListController:

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

The form in my view:

{{ Form::open(array('action' => 'DelegatesController@store', 'class' => 'delegates pull-left form-horizontal add-delegate')) }}
    <div class="control-group">
        {{ Form::label('account_id', 'Account', array('class' => 'control-label')) }}
        <div class="controls">
            {{ Form::select('account_id', $accounts) }}
        </div>
    </div>
    <div class="control-group contacts">
        {{ Form::label('contact_id', 'Contacts', array('class' => 'control-label')) }}
        <div class="controls">

        </div>
    </div>
    <div class="control-group">
    {{ Form::label('delegate_status_id', 'Status', array('class' => 'control-label')) }}
        <div class="controls">
            {{ Form::select('delegate_status_id', $delegate_statuses) }}
        </div>
    </div>
    <div class="control-group">
        {{ Form::label('price', 'Price', array('class' => 'control-label')) }}
        <div class="controls">
            {{ Form::text('price', '', array('class' => 'input-small')) }}
        </div>
    </div>
    {{ Form::hidden('event_id', $event->id) }}
{{ Form::close() }}