Laravel/Javascript: populate a select/dropdown after a different select/dropdown is selected

Question

I'm looking for a solution to populate a dropdown/select (e.g. called dropdown 2) upon selecting an option from another dropdown (e.g. dropdown 1).

For example, selecting Toyota from dropdown 1 will then populate dropdown 2 with the models of a toyota e.g. Corolla, Camry etc. Or another example - picking a country in one dropdown will populate the different cities of that country in another dropdown.

I'm using laravel as my framework, so it's important my solution (a) works within laravel and (b) grabs the results from a mysql database, not just a hardcoded array of values.

I have tried to implement a solution from this post here: http://forums.laravel.io/viewtopic.php?pid=40028

But it's not working within my setup. This is what I have:

My view looks like this:

{{ Form::open() }}
    <select id="make" name="make">
        <option>Select Car Make</option>
        <option value="1">Toyota</option>
        <option value="2">Honda</option>
        <option value="3">Mercedes</option>
    </select>
    <br>
    <select id="model" name="model">
        <option>Please choose car make first</option>
    </select>
{{ Form::close();}}

Then my route.php looks like this:

Route::get('api/dropdown', function(){
    $input = Input::get('option');
    $maker = Client::find($input);
    $models = $maker->projects();
    return Response::eloquent($models->get(array('id','name')));
});

And finally, my script looks like this:

jQuery(document).ready(function($){
$('#make').change(function(){
        $.get("{{ url('api/dropdown')}}", 
            { option: $(this).val() }, 
            function(data) {
                var model = $('#model');
                model.empty();

                $.each(data, function(index, element) {
                    model.append("<option value='"+ element.id +"'>" + element.name + "</option>");
                });
            });
    });
});

I'm currently getting a javascript error in my console:

Failed to load resource: the server responded with a status of 500 (Internal Server Error): http://localhost/test-project/api/dropdown?option=1
Failed to load resource: the server responded with a status of 500 (Internal Server Error): http://localhost/test-project/%7B%7B%20url('api/dropdown')%7D%7D?option=1

I believe I have CSRF tokens on, which apparently may affect things - but I'm really not sure how to work with them so just telling me to fix that wont help, I really need a slight bit of detail on exactly how to fix that (if you think that is the problem).

Alternatively, perhaps a modified or better solution would work better? I'm sure there are many better ways to implement this type of solution.

In summary, my question is: how can I fix my code above to work OR what is an alternate or better way to populate a dropdown list after an option is selected in another dropdown?

I have poured through what feels like hundreds of solutions but none seem to work for me and my laravel-ness!

Edit:

Complete route looks like this:

Route::resource('clients', 'ClientsController');

Route::resource('tasks', 'TasksController');

Route::controller('rates', 'RatesController');

Route::controller('projects', 'ProjectsController');

Route::controller('users', 'UserManagementController');

Route::controller('/', 'UsersController');

Route::get('api/dropdown', function(){
    $input = Input::get('option');
    $maker = Client::find($input);
    $models = $maker->projects();
    return Response::eloquent($models->get(array('id','name')));
});

what happens when you directly execute http://localhost/test-project/api/dropdown?option=1 in your browser and try changing $.get("{{ url('api/dropdown')}}" to $.get("api/dropdown" — Trying Tobemyself
– Trying Tobemyself, Commented Jul 29, 2013 at 11:53
Hi @TryingTobemyselfRahul thank you so much for your response - I tried what you said and it doesn;t fix the problem, when I go directly to the url for test-project/api/ etc it gives me a "Controller method not found." exception — Josh
– Josh, Commented Jul 29, 2013 at 12:15
@TryingTobemyselfRahul updated with a screenshot if that helps? — Josh
– Josh, Commented Jul 29, 2013 at 12:24

Trying Tobemyself · Accepted Answer · 2013-07-29 12:47:46Z

3

The order in which routes are defined in Laravel is crucial. Sometimes you'll be scratching your head and wondering why in the world you're getting an HttpNotFoundException. Consider your routes.php file.

When you define route like Route::controller('/', 'UsersController');, in simple language its greedy route it will not allow routes defined below this route to execute, so when you define this type of route make sure its at the end

So make some change to your route like

Route::get('api/dropdown', function(){
$input = Input::get('option');
$maker = Client::find($input);
$models = $maker->projects();
return Response::eloquent($models->get(array('id','name')));
});
Route::controller('/', 'UsersController');

answered Jul 29, 2013 at 12:47

Trying Tobemyself

3,6683 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1669496 · Accepted Answer · 2013-07-29 12:30:47Z

1

That tutorial was written for Laravel 3 so somethings will be different. You can tell this because some of the methods are in snake_case rather than camelCase.

return Response::json($models->select(array('id','name'))->get())

That should return a valid json response usable by Javascript. However, you may need to do some edits on your models as well if you followed that tutorial. belongs_to should be belongsTo and has_many should be hasMany.

answered Jul 29, 2013 at 12:30

user1669496

33.3k9 gold badges76 silver badges65 bronze badges

4 Comments

Josh Over a year ago

I made changes by adding: return Response::json($models->select(array('id','name'))->get()) and by making those two changes in my model, still not working - I never used Laravel 3 so I have no idea on the different syntax - do you know if there are any more syntax problems with that tutorial? :)

Josh Over a year ago

I'm actually getting a "Call to a member function projects() on a non-object" exception when I go to localhost/test-project/api/dropdown if that helps

user1669496 Over a year ago

That does help. Would you mind updating your original question to also include your Client model's code? I am assuming your database is setup exactly the way it was in the tutorial as well?

Josh Over a year ago

thank you but I solved the issue with Trying. It was an issue with the laravel 3 code but also Trying helped me to find a massive error in my route. Thank you so much for your time, I really appreciate it.

Seenu Jose · Accepted Answer · 2023-05-04 07:36:08Z

0

make some change to your route like

Route::get('api/dropdown', function(){ 

$input = Request::get('option');(option input passing from jQuery)

$maker = Client::where('id', '=',$input);
  ('Client' is your models name ,it should be called in top of the web page 
  like this 'use App\Models\Designation;')

return Response::json($maker->get(array('id','name')));
   ('Id and name' are your listing values from table)
});

one more solution and easy way

 Route::get('api/dropdown', function(){ 

 $input = Request::get('option');

 return Response::json((Client::where('id', '=',$input))->get());

 });

answered May 4, 2023 at 7:36

Seenu Jose

1

Collectives™ on Stack Overflow

Laravel/Javascript: populate a select/dropdown after a different select/dropdown is selected

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related