Cascading DropDown Boxes

That would be a refresh (with new data) or an ajax request to get the search data.

Thanks, I haven't really done much developing so I've downloaded a couple of books from github books on javascript and will try and find something on ajax as well. I watched the video on laracasts on javascript and it was quite interesting I'm sure this is what I need.

If anyone has any laravel examples of this that they could point me to it might help speed up the learning curve.

Thanks :-)

Something like this…

JS:
var suburb = $('#suburb').val();
$.get( "/api/getStreets", { suburb: suburb } ).done(function( data ) {
    $.each(data, function(i, value){
        $('#street_names').append($('<option>').text(value).attr('value', value));
    });
});

PHP:
Route::get('/api/get_streets/{suburb}', function($suburb){
    return Streets::whereSuburb($suburb)->get();
});

Ah thanks, I'm just about to head off to work. Will try this as soon as possible. Thanks for the assistance. :-)

Yeah will try it also

Hi Iprice,

Would really be interested in how you are going or if you get it to work. I'm still struggling to try and figure out a few things to get it all working as I should at the moment. As these are required throughout my project it is important for me that I understand them. I will get there but it's taking a little more time than I originally thought.

Alright, still struggling. But here is what I've got so far.

index.blade

{{ Form::open() }}
        <!-- Suburb Form Input -->
        <div class="form-group">
               {{ Form::label('suburb', 'Suburb:') }}
               {{ Form::select('suburb', $suburbs, ['class' => 'form-control']) }}
        </div>
        <!-- Streets Form Input -->
        <div class="form-group">
               {{ Form::label('streets', 'Street:') }}
               {{ Form::select('streets', $streets, ['class' => 'form-control']) }}
         </div>
{{ Form::close() }}

@section('script')

    var suburb = $('#suburb').val();
    $.get( "/getStreets", { suburb: suburb } ).done(function( data ) {
        $.each(data, function(i, value){
            $('#street_names').append($('<option>').text(value).attr('value', value));
        });
    });

@stop

routes.php

Route::get('getStreets?suburb={id}', function($id) {
   return Street::whereSuburb($id)->get();
});

Streets.php (Model)

public function whereSuburb($id){
        return DB::table('streets')
            ->select('streetName', 'id')
            ->where('suburbsId', '=', $id)
            ->get();
    }

dropDownController.php

public function index()
    {
        $suburbs = Suburb::lists('suburbsName', 'id');

        $streets = Street::lists('streetName', 'id');

        return View::make('addresses.index')->with('suburbs', $suburbs)->with('streets', $streets);
    }

I know that I need to remove the $streets variable from my controller and build up the options for the select somewhere.

At present when I change a suburb the javascript is triggering and I get the following error

"NetworkError: 404 Not Found - http://vic.distribution.app:8000/getStreets?suburb=2"

Any ideas or suggestions?

Thanks in advance

Well I've got a little closer to a functioning solution. But still haven't got it working 100%. I've altered my routes.php

Route::get('/getStreets', function($id) {
   return Street::whereSuburb($id);
});

I've altered my Street.php (model). Not sure if it is best practice but it works (or it does from a controller and I dd() the results.)

use Illuminate\Support\Facades\DB;

public static function whereSuburb($id){
        return DB::table('streets')
            ->select('streetName', 'id')
            ->where('suburbsId', '=', $id)
            ->get();
    }

I've altered my view.blade.php

{{ Form::open(['route' => 'get_address_path']) }}
                        <!-- Suburb Form Input -->
                        <div class="form-group">
                            {{ Form::label('suburb', 'Suburb:') }}
                            {{ Form::select('suburb', $suburbs, ['class' => 'form-control']) }}
                        </div>
                        <!-- Street Form Input -->
                        <div class="form-group">
                            {{ Form::label('street_names', 'Street:') }}
                            <!-- expecting jQuery to inject option to here -->
                        </div>
                        <div class="form-group">
                            {{ Form::submit('Get Addresses',['class' => 'btn btn-default btn-xs']) }}
                        </div>
                    {{ Form::close() }}

 $(document).ready(function(){
var suburb = $('#suburb').val();
    $.get( "/getStreets", { suburb: suburb } ).done(function( data ) {
        $.each(data, function(i, value){
            $('#street_names').append($('<option>').text(value).attr('value', value));
        });
    });
});

When I use the menu to select a suburb I get nothing, not sure how to test what is wrong here. Any breadcrumbs or assistance would be greatly appreciated.

Route::get('/getStreets', function($id) {
   dd(Street::whereSuburb($id));
});

Thanks :-)