I'm doing a web application "for" an airline, using Laravel, I need to create tables, so I use Bootstrap-table. These tables have content, and have an event that is activated every time a row is clicked. By clicking I pass the data that I have in the table, thanks to a query; Of course the query may have other fields but not necessarily show them in the table, as in my case, I would have that, "hidden" the ID of a particular flight, this ID will help me in a query, I get all the seats they have that foreign ID and also their status is available. Said logically what I would do would be to return the seat number. And with a foreach to create the select options.
Clicking on the row shows me a modal, in the modal I would have entered the Select code, just as, for example, in my table I have the fields of Destination, Origin, Cost, etc., which are passed in the click event, and within the modal, those values are assigned in an Input. But the query to know the available seats of that flight, I DO NOT KNOW WHERE TO DO IT. If you need code of my model used, what I have in my controller and my view, I can provide it.
The code of my modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Make the reservation</h4>
</div>
<div class="modal-body">
<form method="post" action="/reservations" id="frm-update">
<input type="hidden" name="id_user" id="id_user" value="">
<input type="hidden" name="accion" value="register">
<div class="form-group">
<label for="dep" class="control-label">Departure:</label>
<input type="text" class="form-control" placeholder="Departure" id="dep" name="dep" readonly="true"></input>
</div>
<div class="form-group">
<label for="dest" class="control-label">Destination:</label>
<input type="text" class="form-control" placeholder="Destination" id="dest" name="dest" readonly="true"></input>
</div>
<div class="form-group">
<label for="date" class="control-label">Date:</label>
<input type="text" class="form-control" placeholder="Date and Hour" id="date" name="date" readonly="true"></input>
</div>
<div class="form-group">
<label for="seats" class="control-label">Aviable Seats:</label>
<select class="" name="seats">
</select>
</div>
<div class="form-group">
<label for="money" class="control-label">Cost:</label>
<input type="text" class="form-control" placeholder="Cost ($)" id="costo" name="costo" readonly="true"></input>
</div>
<div class="form-group">
<label for="money" class="control-label">Aviable Money:</label>
<input type="text" class="form-control" placeholder="Your aviable money" id="money" name="money" readonly="true"></input>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="evento-update" class="btn btn-primary">Make reservation</button>
</div>
</div>
</div>
</div> <!-- Modal -->
My bootstrap code
<section class="row">
<div class="col-lg-12">
<h1 class="page-header">List of aviable flights<br> <small>Choose a flight to see details</small></h1>
</div>
<section class="row">
<section class="col-md-12">
<table id="tabla-pagos" data-search="false" style="background-color: #0288D1">
<thead>
<tr>
<th data-field="userid" data-sortable="true">ID</th>
<th data-field="date" data-sortable="false">Date and Time</th>
<th data-field="number" data-sortable="false">Flight Number</th>
<th data-field="seats" data-sortable="false">Airplane Seats</th>
<th data-field="departure" data-sortable="false">Departure</th>
<th data-field="destination" data-sortable="false">Destination</th>
</tr>
</thead>
</table>
</section>
</section>
</section> <br>
On the other hand, javascript, where an ajax request is used to fill the table, and after clicking the row, pass the data to the modal.
<script type="text/javascript" charset="utf-8">
$(function(){
var $table = $("#tabla-pagos");
$table.bootstrapTable();//convertir una tabla en un objeto de bootstrap table
$.ajax({
url: '/reservations',
type: 'POST',
dataType: 'json',
data: {accion: 'consulta'},
})
.done(function(response) {
$table.bootstrapTable('showLoading');
if(response.length>0){
$table.bootstrapTable('destroy');
$table.bootstrapTable({data: response});
}
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
$table.bootstrapTable('hideLoading');
console.log("complete");
})
$table.on('click-row.bs.table', function(row, $element){
$('#myModal').modal('toggle');
$('#id_user').val($element.userid);
$('#dep').val($element.departure)
$('#dest').val($element.destination)
$('#date').val($element.date)
$('#costo').val($element.costo)
});
$("#evento-update").on('click', function(event){
event.preventDefault();
event.stopPropagation();
$('#frm-update').submit();
})
});
</script>
In my controller, I have 2 functions
public function reservation() {
if (Request::method() == 'GET'){
return View::make('user.reservation');
}
else {
switch (Input::get('accion')) {
case 'consulta':
return $this->consultaReservations();
break;
case 'register':
$idu = Auth::id();
$user = Pasajero::where('usuarios_id','=', $idu)->first();
$Id = $user->id;
$reservation = new Reservation();
$reservation->vuelo_id = Input::get('id_user');
$reservation->pasajeros_id = $Id;
$reservation->save();
return Redirect::back()
->with('reser', "You have made a reservation");
break;
default:
return array();
break;
}
}
}
//Consulta de todos los vuelos disponibles para el usuario
private function consultaReservations(){
$id = Auth::id();
$consulta = DB::table('vuelos')
->join('origenes', 'origenes.id', '=', 'vuelos.origen_id')
->join('destinos', 'destinos.id', '=', 'vuelos.destino_id')
->join('aviones', 'aviones.id', '=', 'vuelos.avion_id')
->select('vuelos.id as userid','vuelos.fecha as date', 'vuelos.numero_vuelo as number', 'vuelos.costo as costo',
'aviones.num_asientos as seats', 'origenes.nombre_origen as departure', 'destinos.nombre_destino as destination')
->get();
return $consulta;
}
UPDATE:
The code of the query that would bring me the available seats I already have, is this:
select seats.numero_asiento as num_asiento from flights
join origins on origins.id = flights.origin_id
join destinations on destinations.id = flights.destination_id
join planes on planes.id = flights.avion_id
join seats on seats.aviones_id = aviones.id
where sillas.estado_aciento="Available"
and flights.id = 1;
The point is here
where asientos.estado_aciento = "Disponible" and vuelos.id = 1;
I know that where I have the 1, I should send the ID obtained once the row is clicked, and with that query, I can generate the slect options.