Dependent Drop downs

ralanyo

replied 10 years ago

Sorry for the messed up looking code. I don't see an edit button to format it now that it is live.

Last updated 2 years ago.

0

ralanyo

replied 10 years ago

Solution

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');

Last updated 2 years ago.

0

alvarisi

replied 10 years ago

thanks for share ralanyo.. :)

Last updated 2 years ago.

0

alpacin0

replied 8 years ago

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');

Last updated 8 years ago.

0

Moderators