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)

 

 

 

 

 

 

dropdown list using AJAX and Laravel
Tagged on:                                         

One thought on “dropdown list using AJAX and Laravel

  • August 1, 2014 at 5:38 am
    Permalink

    I see that your page has low rank in google, it’s hard to find it in search results, i found this article on 14 spot, If
    your page would be in the google top 10, then your traffic would
    increase several times, i know how to help you,
    simply search in google for – k2 seo tips

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 20 = 27

This site uses Akismet to reduce spam. Learn how your comment data is processed.