Sorry for the messed up looking code. I don't see an edit button to format it now that it is live.
I figured it out. Here is the solution using completely different code. This is for a shooting arena where people can rent shooting equipment. The goal is to select a rental type dropdown, which populates a number which the rental equipment is identified by. Example... Rifle number 12, or magazine number 4
MY VIEW
{{ Form::open() }}
<select id="type_id" name="type_id">
<option value="">--</option>
<option value="3">Rifle</option>
<option value="1">Magazine</option>
</select>
<select id="series" name="series">
<option value="">--</option>
</select>
{{ Form::close();}}
<!-- Script for dependent drop downs. -->
<script>
$(document).ready(function($){
$('#type_id').change(function(){
$.get("{{ url('api/repairdropdown')}}", { option: $(this).val() },
function(data) {
var numbers = $('#series');
numbers.empty();
$.each(data, function(key, value) {
numbers
.append($("<option></option>")
.attr("value",key)
.text(value));
});
});
});
});
</script>
My Controller
public function dropdown()
{
$input = Input::get('option');
$numbers = DB::table('rental_inventories')
->where('type_id', $input)
->orderBy('number', 'desc')
->lists('number','number');
return Response::json($numbers);
}
My route
Route::get('api/repairdropdown', 'RentalrepairsController@dropdown');
Thanks for the input ralanyo, your workaround example helped me a lot!! However I would like to post my workaround with a few changes I made,
I'm using Laravel 5.1 and had troubles with some 500 Internal server error and also TokenMismatch exception if the ajax is POST instead of GET. So here's my fully working example with States and Cities. It's supposed that my 2 tables are already populated with data.
My dropdowns on the View (form-joining.blade.php)
<head><meta name="csrf-token" content="{!! csrf_token() !!}"></head> //To avoid Csrf issues, see my dropdown-script.blade.php
<div class="form-group">
{!! Form::select('homeDepartment', $location->statesList(), Input::old('homeDepartment'), array('id' => 'homeDept', 'class' => 'form-control')) !!}
</div>
<div class="form-group">
{!! Form::select('homeCity',['0' => '--'], Input::old('homeCity'), array('id' => 'homeCity', 'class' => 'form-control')) !!}
</div>
@include('includes.dropdown-script') // I put this just before closing my <body> tag
My Controller (UsersController.php)
use Response; //at the top of your controller
//show form
public function create()
{
return view('user.form-joining', ['location' => Location::find(1)]);
}
//post request from ajax call
public function dropdown(Request $request)
{
$input = $request->input('option');
$ciudades = Location::citiesFromState($input);
return Response::json($ciudades);
}
My Model (Location.php)
public function statesList()
{
return Location::lists('departmentName','departmentID')->toArray();
}
public static function CitiesFromState($id)
{
return Location::where('departmentID','=', $id)->lists('townName','townID')->toArray();
}
My Script (dropdown-script.blade.php)
<script type="text/javascript">
// Script para el dropdown dinámico
$(document).ready(function($){
$('#homeDept').change(function(){
$.post("{!! route('dropdown') !!}", { option: $(this).val() },
function(data) {
var ciudades = $('#homeCity');
ciudades.empty();
$.each(data, function(key, value) {
ciudades
.append($("<option></option>")
.attr("value",key)
.text(value));
});
});
});
});
// If I use POST from the ajax call, I got a TokenMismatch Exception, so if you add the below script and also the meta tag at the head of your view, it will work.
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
My routes.php
Route::post('api/dropdown', 'UsersController@dropdown')->name('dropdown');
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community