dropdown list using AJAX and Laravel

On my website, I want to display a drop-down list of cars, from which once the item(car) is chosen, the corresponding car’s price is retrieved from DB. The challenges are:

1. car price is just part of the screen

2. car price is determined by two parameters: a. tour id; b. car chosen

Point 1 above means AJAX is required to populate part of the page; point 2 means the AJAX should take two parameters instead of one.

There are some examples on the web about AJAX with Laravel but they are quite simple in the sense only  one parameter is passed. Below I’m going to show how to pass two parameters.

Database model

table tours

Schema::create(‘tours’, function(Blueprint $table){

$table->increments(‘id’);
$table->string(‘title’);
$table->zone(‘title’);
$table->text(‘description’)->nullable();
$table->string(‘thumbnail’);
$table->timestamps();
});

table car_prices (which holds various car prices per zone)

Schema::create(‘car_prices’, function(Blueprint $table){

$table->increments(‘id’);
$table->integer(‘car_id’)->unsigned();
$table->foreign(‘car_id’)->references(‘id’)->on(‘cars’);
$table->string(‘zone’);
$table->decimal(‘price’, 6, 2);
t$table->timestamps();
}

Below is a function within a controller(HomeController), which returns car price based on two parameters: tour_id and car_id.

//function that is called by AJAX
public function get_carPrice($tour_id,$car_id) {
//only respond to ajax calls
if(Request::ajax()){

$carPrice=DB::table(‘car_prices’)
->join(‘tours’, ‘car_prices.zone’, ‘=’, ‘tours.zone’)
->where(‘car_prices.car_id’, ‘=’, $car_id)
->where(‘tours.id’,’=’,$tour_id)
->select(‘car_prices.price as price’,’tours.id as tour_id’,’car_prices.car_id as car_id’)
->get();

// array of objects are returned though in fact just one row(one field price) is returned
return $carPrice[0]->price;
}
}

Those two parameters are passed in by the following route

Route::get(‘/tour/{id}/{car_id}’, array(‘uses’=>’HomeController@get_carPrice’));

Below is the Javascript(using jQuery), don’t need to go into detail for now.

getCarPrice.js

jQuery(document).ready(function($) {

//************************************
// Car price based on zone
//************************************
//get value of field tour_id
var tour_id=$(“#tour_id”).val();
$(‘#car_id’).change(function(e) { // e=event
// get select car_id
var car_id=$(‘#car_id option:selected’).val();
// AJAX request
$.get(‘/tour/’+tour_id+’/’+car_id, function(data) {
$(‘#car-price’).text(‘$’+data);

});

})

});

————————————————————————————————————-

Below are key lines from the view:

<div class=”col-sm-4″>
{{ Form::select(‘car_id’, $car_list,null, array(‘id’=>’car_id’) ) }}
</div>

{{– Placeholder for AJAX content –}}
<div class=”col-sm-4″>
{{ Form::label(‘car-price‘, ‘ ‘, array(‘id’=>’car-price’, ‘class’=>’col-sm-2 control-label’,’style’=>’color:blue;font-weight: bold’)) }}
</div>

Note in the above the dropdown list “car_id” contains a list of cars, the lines below create a place holder for selected car price. When the view is loaded, it’s empty.

So below is how everything works together:

1. when the view is loaded, the drop-down list is populated with cars and the label “car-price” contains nothing.

2. when user selects an item, event $(‘#car_id’).change in the Javascript is  triggered, and the two parameters are passed to Laravel’s route via get ( $.get(‘/tour/’+tour_id+’/’+car_id )

3. Laravel’s route calls function  get_carPrice to run the DB query to get the result

4. the result is passed back to the Javascript and populates the label  car-price $(‘#car-price’).text(‘$’+data)