I am trying to get one select box(number) to be depending on another(type). I am close but i keep getting undefined in the 'number' select. Any ideas as to why this might be happening. Or another easier way to perform this task? Thanks in advance.
Here is my code.
view
{{ Form::open() }}
<select id="type" name="type">
<option>Select Rental Equipment</option>
<option value="3">Rifle</option>
<option value="1">Magazine</option>
</select>
<br>
<select id="number" name="number">
<option>Choose number</option>
</select>
{{ Form::close();}}
<script>
jQuery(document).ready(function($){
$('#type').change(function(){
$.get("{{ url('api/dropdown')}}",
{ option: $(this).val() },
function(data) {
var number = $('#number');
number.empty();
$.each(data, function(index, element) {
number.append("<option value="+ element.id +">" + element.name + "</option>");
});
});
});
});
</script>
Route Route::get('api/dropdown', 'RentalrepairsController@dropdown');
controller
public function dropdown() { $input = Input::get('option'); $numbers = DB::table('rental_inventories')->select('number')->where('type_id', '=', 3)->get(); return $numbers; }
models <?php
class Rentalrepair extends Eloquent {
protected $guarded = array();
public static $rules = array(
'notes' => 'required'
);
//relationship
public function RentalInventory()
{
return $this->belongsTo('RentalInventory', 'rentals_inventories_id');
}
}
<?php
class RentalInventory extends Eloquent {
protected $guarded = array();
public static $rules = array()
}
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')}}</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